Content屬性應該算是使用最常用的一個css屬性之一吧,比如我們創建一個聊天氣泡、超鏈接的立體翻轉特效、添加圖標。都要使用到content屬性,當然這個屬性要結合:before和:after偽類使用。下面詳細介紹它的用法。
字符串
可以添加任意的字符串,用括號包圍。另外可以使用UTF-8特殊字符(哪些特殊字符可用查看這里),以/開頭。如下
這是一個在元素前面或後面插入內容的方法(搭配 selector:before和selector:after)
HTML:
CSS:
運行結果就很直觀了。content屬性的值除了使用文本值外,還可以使用標簽的一些屬性值,方法是attr(),參見如下代碼:
結果如下截圖(截自Firefox3.6):
URI
使用url()可以載入外部資源,主要是一些圖標和圖片,如果資源不可以顯示有的瀏覽器會忽略它,有的會顯示替代文本。
        
代碼:
不過導入的圖片是不能改變寬高的,必須預先設定好。筆者一般使用background載入圖片,然后使用background-size調整尺寸。如下圖,前者使用content載入圖片,無法改變圖片寬高,后者是是使用background載入圖片的效果。
 
  | 
新聞熱點
疑難解答