CSS伪类对象 after和before的用法 在css3中将大有用处！

IE对after、before是不支持的，请在firefox、opera、chrome下试调！

:before

语法：Selector : before { sRules }

说明：用来和 content 属性一起使用，设置在对象前(依据对象树的逻辑结构)发生的内容。

:after

语法：Selector : after { sRules }

说明：用来和 content 属性一起使用，设置在对象后(依据对象树的逻辑结构)发生的内容。

看以下这句定义的理解,也许你会更清楚一点...呵呵...

:after 伪元素在元素内容之后插入内容。

这个伪元素允许创作人员在元素内容的最后面插入生成内容。默认地，这个伪元素是行内元素，不过可以使用属性 display 改变这一点。

after和before的用法的小例子

<style type="text/css">
div{border:1px solid #000000;}
.a:after {
content: "after后面";
color:red;
border:1px solid red;
}
.b:after {
content: "after后面";
color:red;
display:block;
border:1px solid red;
}
.c:before {
content: "before前面";
color:red;
border:1px solid red;
}
</style>
<div class="a">zhmkxp's space</div>
<br><br>
<div class="b">zhmkxp's space</div>
<br><br>
<div class="c">zhmkxp's space</div>
<br><br>



-----------------------------------------------------------------------------------------------------------------------

用 :after 及 :before 伪元素一起使用，在对象前或后插入内容。
对应的脚本特性为 content

<style type="text/css">
a:after{content:"(link)";}
a:before{content:"LINK";}
a.ss:after{content:"(linkSS)";}
a.ss:before{content:"SSLINK";}
</style>

<a href="http://hi.baidu.com/zhmkxp">zhmkxp's space</a>
<br />
<a href="http://hi.baidu.com/zhmkxp" class="ss">zhmkxp's space</a>

 

转载于:https://www.cnblogs.com/GeekHacker/archive/2012/06/24/2560008.html