::before和::after的使用

HTML部分

<ul>
<li>
<span class="before">原始添加的</span>
<span class="after">原始添加的后面的</span>
</li>
</ul>

CSS部分

li::before,li::after {
/*默认的情况下是一个行内元素，所以当需要设置宽高的情况必须先转成块元素*/
display: block;
/*content这个属性必须要写，没有内容就给空*/
content: '';
width: 100px;
height: 100px;
background: red;
margin: 10px;
}