CSS伪类对象 after和before的用法
 

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

  :before

  语法:Selector : before { sRules }

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

  :after

  语法:Selector : after { sRules }

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

 

 

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

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

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


 

after

 

 

 

源代码: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>after伪元素</title>
 
<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;
}
 
 
a:after{content:"(link)";} 
a:before{content:"链接";} 
a.ss:after{content:"(linkss)";} 
a.ss:before{content:"ss链接";} 
 
</style>
 
</head>
 
<body>
<h3>:after 伪元素在元素内容之后插入内容。这个伪元素允许创作人员在元素内容的最后面插入生成内容。默认地,这个伪元素是行内元素,不过可以使用属性 display 改变这一点。</h3>
 
    <div class="a">jianan8610</div>
    <br><br>
    <div class="b">jianan8610</div>
    <br><br>
    <div class="c">jianan8610</div>
<br/>    
<br/> 
<h3>用 :after 及 :before 伪元素一起使用,在对象前或后插入内容。对应的脚本特性为 content </h3>  
<a href="http://hi.baidu.com/jianan8610">jianan8610</a>  <br><br>
<a href="http://hi.baidu.com/jianan8610" class="ss">jianan8610</a>
</body>
</html>