1、selector:before( sRules ) 它要和content属性一起使用，设置在对象前（依据对象树的逻辑结构）发生的内容；
2、selector:after( sRules ) 和before用法一样，不过它是设置在对象后（依据对象树的逻辑结构）发生的内容；
<style>
.div{width:350px; border:1px solid #000; line-height:50px; margin:10px;}
.divb{width:500px; border:1px solid #FC0;}
.after,.before,.block{border:1px solid #330;}
.after:after{content:‘我在后面吧‘; color:#F00;}
.before:before{content:‘我在前面吧‘; color:#F00;}
.block:after{content:‘我是块元素，我占一行‘; color:#F00; display:block;}
.block{display:block;}
</style>
<body>
<div class="div">after<span class="after">我是里面的内容</span></div>
<div class="div">before<span class="before">我是里面的内容</span></div>
<div class="divb">block<span class="block">我是里面的内容</span></div>
</body>
运行结果如图！我为什么要把<span class="block">转换为块级元素呢？因为块元素插入内联元素不符合标准，不规范，不转化的话显示有问题。我也不清楚.
原文地址：https://www.cnblogs.com/qianphong/p/10386105.html
时间： 2024-10-10 07:04:32