在css當中before選擇器用來向被選擇的標簽前面插入內(nèi)容，after選擇器用來向被選擇的標簽后面插入內(nèi)容。

舉例說明

我們要通過css向一個p標簽的前面和后面插入內(nèi)容。內(nèi)容可以是文本可以是樣式。
在這里要使用到css當中的content屬性，content屬性可以通過css向html標簽里添加文字內(nèi)容。

基本的html

<p>我是中間</p>

原始的html如上。

在css中添加before和after選擇器

p:before{
  content:"我是前面";
}
p:after{
  content:"我是后面";
}

添加完css之后html的狀態(tài)

<p>我是前面</p>
<p>我是中間</p>
<p>我是后面</p>

總結(jié)

before和after應(yīng)用的樣式被添加到了偽元素上，就是實際上這種標簽元素都是不存在的，但是有時為了方便所以我們通過添加一個假的代碼來實現(xiàn)。

案例

電池