::before和::after的使用

原创
2018/03/27 08:50
阅读数 32

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,可以添加一个子节点,并且这个子节点的样式可以像普通元素一样去设置。

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部