CSS 有兩個說不上常用的偽類 :before 和 :after，偶爾會被人用來添加些自定義格式什么的，但是它們的功用不僅于此。前幾天發現了 Creative Link Effects 這個非常有意思的介紹創意鏈接特效的頁面，里面驚人的效果大量使用到的特性除了 transform 屬性進行變形之外，就是接下來要介紹的這兩個偽元素了。
一 基本語法
在了解進階的應用之前，先來了解一下語法規則。平常僅僅需要將這兩個偽元素用于添加一些自定義字符時，只需使用偽類使用的單冒號寫法，以保證瀏覽器的兼容性：
不過，在 CSS3 中為了區別偽元素和偽類為偽元素使用了雙冒號，因此如果使用了 display 或者 width 等屬性時使得顯示脫離了原本元素后，建議按照標準雙寫。過于老的瀏覽器可能會存在支持問題，不過偽元素大多是配合 CSS3 使用，就無所謂向下兼容了：
這兩個偽類下特有的屬性 content ，用于在 CSS 渲染中向元素邏輯上的頭部或尾部添加內容。注意這些添加不會改變文檔內容，不會出現在 DOM 中，不可復制，僅僅是在 CSS 渲染層加入。比較有用的是以下幾個值：
[String] – 使用引號包括一段字符串，將會向元素內容中添加字符串。示例：
attr() – 調用當前元素的屬性，可以方便的比如將圖片的 Alt 提示文字或者鏈接的 Href 地址顯示出來。示例：
url() / uri() – 用于引用媒體文件。示例：
counter() – 調用計數器，可以不使用列表元素實現序號功能。具體請參見 counter-increment 和 counter-reset 屬性的用法。示例：
新聞熱點
疑難解答
