CSS :before :after 偽類選擇器

所有主流瀏覽器都支持 :after 選擇器。

注釋：對于 IE8 及更早版本中的 :after，必須聲明 <!DOCTYPE>。

　　:before

　　語法：Selector : before { sRules }

　　說明：用來和 content 屬性一起使用，設置在對象前(依據對象樹的邏輯結構)發生的內容。

　　:after

　　語法：Selector : after { sRules }

　　說明：用來和 content 屬性一起使用，設置在對象后(依據對象樹的邏輯結構)發生的內容。

　　content

　　語法：content : attr(alt) | counter(name) | counter(name , list-style-type) | counters(name , string) | counters(name , string , list-style-type) | no-close-quote | no-open-quote | close-quote | open-quote | string | url(url)

　　取值：

　　attr(alt) :　 使用對象的 alt 屬性的文字

　　counter(name) :　 使用已命名的計數器

　　counter(name, list-style-type) :　 使用已命名的計數器并遵從指定的 list-style-type 屬性

　　counters(name, string) :　 使用所有已命名的計數器

　　counters(name, string, list-style-type) :　 使用所有已命名的計數器并遵從指定的 list-style-type 屬性

　　no-close-quote :　 并不插入 quotes 屬性的后標記。但增加其嵌套級別

　　no-open-quote :　 并不插入 quotes 屬性的前標記。但減少其嵌套級別

　　close-quote :　 插入 quotes 屬性的后標記

　　open-quote :　 插入 quotes 屬性的前標記

　　string :　 使用用引號括起的字符串

　　url(url) :　 使用指定的絕對或相對 url 地址

　　說明：用來和 :after 及 :before 偽元素一起使用，在對象前或后顯示內容。對應的腳本特性為 content 。

—————

p:after {

content:"- 臺詞";

background-color:yellow;

color:red;

font-weight:bold;

} ?

a[href]:after{content:"(link)";}

a[href]:before{content:"鏈接";}

總結

以上是生活随笔為你收集整理的CSS :before :after 伪类选择器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。