本篇重點介紹CSS中的:befor、:after創建的偽元素幾種使用場景，如填充文本、作為iconfont、進度線、時間線以及幾何圖形。

1. 介紹

1.1 說明

CSS中的:befor、:after都會創建一個偽元素，其中:befor創建的偽元素是所選元素的第一個子元素，:after創建的偽元素是所選元素的最后一個子元素。

:befor、:after創建的偽元素默認樣式為內聯樣式。

1.2 語法

CSS3引入了 ::（兩個冒號）是用來區分偽類(:一個冒號)和偽元素(::兩個冒號)。

偽類：操作元素本身，如 :hover、:first-child、:focus等等。

偽元素：操作元素的子元素，如 ::before、::after、::content等等。

在IE8中只支持:(一個冒號)，所以為了兼容這些瀏覽器也可以使用 :befor、:after。

1.3 content屬性

content 屬性表示偽元素填充的內容。

示例

CSS：

HTML頁面：

效果：

1.4 可替換元素

可替換元素（replaced element）：其展現不由CSS來控制的。這些元素是一類外觀渲染獨立于CSS的對象。

典型的可替換元素有<iframe>、<img>、 <object>、 <video> 以及 表單元素，如<textarea>、 <input> 。

某些元素只在一些特殊情況下表現為可替換元素，例如 <audio> 和 <canvas> 。

:befor :after 在此類元素內是不生效的。

 1.5 瀏覽器支持情況

IE9版本才開始完全支持 :befor :after ，Chrome、Firefox現都已全線支持。

2. 應用場景

2.1 支持文本字符

說明：content屬性支持文本字符。

示例：

2.2 支持iconfont

說明：content屬性也支持iconfont字體圖表的展示。這也是使用最多的場景。

示例：此示例已引用了阿里iconfont圖標庫

2.3 進度線與時間線

說明：:befor :after創建的偽元素可以以線條方式定位在元素周邊的指定位置上，如進度線和時間線。

1) 進度線

2) 時間線