CSS3 Pseudo Element 伪元素

提供通过文档树之外的方法设置元素或者内容的样式。必须以::后跟伪元素名称实现。

语法：

伪元素名

描述

::first-line

元素的第一行内容。

::first-letter

元素的首字母。

::before

在元素内容的前面生成内容。例如：

  p::before 
  {
    content: "这些内容不是元素本身的内容。";
    font-size: small;
    color: red;
  }

::after

在元素内容的后面生成内容。

::selection

选中的内容。

说明：

其他浏览器都支持标准的::selection，Firefox4目前还需要使用 ::-moz-selection。

例子 1：

<style>
p::first-line { color: #F00;}
p::first-letter { font-size:96px;}
img::before { color:green; content:"CSS产生的内容，适用于 ::before 属性。"}
div::selection{ font-weight:bold;color:red;}
div::-moz-selection{ color:red;}
</style>

<p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试。</p>
<div><span>不属于::before的内容</span><img src="http://dotnet.aspx.cc/Images/logoSite.gif" alt=""/></div>
<div>测试选择内容。</div>

测试结果：Internet Explorer 9，Firefox 4，Opera 11，Safari 5，Chrome 10 都支持::first-line、::first-letter、::selection（::-moz-selection）属性。Opera 11支持 ::before 属性。

例子 2：

<style>
div::before {
  content: "CSS 产生的前面的内容."; 
  background:yellow;
}
div:before {
  content: "CSS 产生的前面的内容."; 
  background:yellow;
}
div::after {
  content: "CSS 产生的后面的内容."; 
  background:yellow;
}
div:after {
  content: "CSS 产生的后面的内容."; 
  background:yellow;
}
</style>

<div>:before（CSS2）或 ::before（CSS3）测试</div>

测试结果：Internet Explorer 8，Internet Explorer 9，Firefox 4，Opera 11，Safari 5，Chrome 10 都支持该属性。

CSS3 中文参考手册

Pseudo Element 伪元素

语法：

说明：

例子 1：

例子 2：