1. 使用自增功能实现列表序号
<ul class="sort-list">
<li class="sort">元素列表</li>
<li class="sort">元素列表</li>
<li class="sort">元素列表</li>
<li class="sort">元素列表</li>
<li class="sort">元素列表</li>
</ul>
.sort-list {
counter-reset: li;
list-style-type: none;
}
.sort {
color: #000;
background: #ccc;
margin-top: 14px;
padding: 15px;
opacity: .8;
width: 300px;
}
.sort::before {
content: counter(li)". ";
counter-increment: li;
}
2. 使用after实现自动换行
<div class="poem">
<span class="break-line">故人西辞黄鹤楼</span>
<span class="break-line">烟花三月下扬州</span>
</div>
.break-line::after {
content: "\A";
white-space: pre;
}
3. 使用css的attr函数实现placeholder
<div class="input-text attr-placeholder" contenteditable="true" data-placeholder="请输入文字"></div>
.input-text {
width: 300px;
padding: 10px;
font-size: 20px;
line-height: 1.4;
border: 1px solid #ccc;
outline: none;
}
.attr-placeholder:empty::before {
content: attr(data-placeholder);
color: #b2b2b2;
}
4. 使用伪元素实现背景图片
<div class="fake-el-img"></div>
.fake-el-img::before {
content: url('https://upload-images.jianshu.io/upload_images/2377129-8f1bbbe3fb322c6f.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240');
}
妖尾图片
5. 使用伪元素扩大可点击区域
<span class="btn">button</span>
.btn {
font-size: 18px;
font-family: Helvetica, Tahoma, Arial;
line-height: 1em; /*使用em作为单位，即使字体变化，按钮的整体样式也会按比例跟随变化*/
color:#fff;
background: linear-gradient(135deg,#fce,#cce);
padding: .5em 1.5em;
border-radius: 2em;
display: inline-block;
position: relative;
}
.btn::before {
content: '';
position: absolute;
left: -5px;
right: -5px;
top: -5px;
bottom: -5px;
}
可以根据自己想要添加的范围，修改值，目前为5px
