::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;
}

如上代码所示，通过::before和::after，可以添加一个子节点，并且这个子节点的样式可以像普通元素一样去设置。

转载于:https://my.oschina.net/yardbaby/blog/1785359