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。