css：before和after中的content属性

css有一个属性叫作content。content只能使用在:after和:before之中。它用于在元素以前或者元素以后加上一些内容

就像这样：

.email-address:before { content: "Email address: "; }

咱们能够书写的html代码：

<ul> <li class="email-address">chriscoyier@gmail.com</li> </ul>

输出的内容是这样的：

• Email address: chriscoyier@gmail.com

让咱们细致的看看这个属性：

 

使用特殊的字符：

咱们能够借鉴表格来判断特殊的ASCII码对应的字符，表格点击我！ 就像表格中展现的同样，版权的图标© 是 © 因此ASCII 是169.

而后点击表格进行css以及js中使用的字符数字之间的转换。

简单可是很实用，下面是一些简单的字符：

\00A9 - 版权
\2192 - 右箭头
\2190 - 左箭头

使用属性

你能够在content中使用目标元素的属性，例如一个连接可能以下：

<a title="A web design community." href="http://css-tricks.com">CSS-Tricks</a>

你能够获取上面连接的title属性：

a:before {
   content: attr(title) ": ";
}

咱们能够使用目标元素的任何属性，只要只用了形式是 attr(name-of-attribute)的写法. 

#Example Trick: CSS3 tooltips

 

a {
  color: #900;
  text-decoration: none;
}

a:hover {
  color: red;
  position: relative;
}

a[title]:hover:after {
  content: attr(title);
  padding: 4px 8px;
  color: #333;
  position: absolute;
  left: 0; 
  top: 100%;
  white-space: nowrap; 
  z-index: 20px;
  -moz-border-radius: 5px; 
  -webkit-border-radius: 5px;  
  border-radius: 5px;  
  -moz-box-shadow: 0px 0px 4px #222;  
  -webkit-box-shadow: 0px 0px 4px #222;  
  box-shadow: 0px 0px 4px #222;  
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);  
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
  background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);  
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);  
  background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);  
  background-image: -o-linear-gradient(top, #eeeeee, #cccccc);  
}

由于全部的元素都有title属性，因此能够使用data-自定义属性这样子来对于制定特性的元素设置样式。

须要考虑的点：

• Firebug不能检测目标元素。在  WebKit 的浏览器中能够指检测到元素，可是,不能展示目标元素的健对值。 
• 不能用于变形和动画属性。

浏览器支持

全部的主流浏览器(Firefox 3+, Safari 3+, Chrome 3+, Opera 10+, and Internet Explorer 8+) (查看表格) 支持 :after/:before。