站長(zhǎng)資訊網(wǎng)
css3中“:after”偽元素的content屬性：1、設(shè)置為none空值；2、設(shè)置為normal，會(huì)被視為none空值；3、counter設(shè)定計(jì)數(shù)器，產(chǎn)生的內(nèi)容是該偽類元素指定名稱的最小范圍的計(jì)數(shù)；4、設(shè)置為string文本內(nèi)容；5、設(shè)置為“open-quote”前引號(hào)；6、設(shè)置為“close-quote”后引號(hào)等等。
本教程操作環(huán)境：windows10系統(tǒng)、CSS3&&HTML5版本、Dell G3電腦。
css3中after的content屬性
content 屬性與 :before 及 :after 偽元素配合使用，來(lái)插入內(nèi)容。
語(yǔ)法格式：
content: normal|none|counter|attr|string|open-quote|close-quote|no-open-quote|no-close-quote|url|initial|inherit;
可能的值：
-
none 設(shè)置 content 為空值。
-
normal 在 :before 和 :after 偽類元素中會(huì)被視為 none，即也是空值。
-
counter 設(shè)定計(jì)數(shù)器，格式可以是 counter(name) 或 counter(name,style) 。產(chǎn)生的內(nèi)容是該偽類元素指定名稱的最小范圍的計(jì)數(shù)；格式由style指定（默認(rèn)是'decimal'——十進(jìn)制數(shù)字）
-
attr(attribute) 將元素的 attribute 屬性以字符串形式返回。。
-
string 設(shè)置文本內(nèi)容
-
open-quote 設(shè)置前引號(hào)
-
close-quote 設(shè)置后引號(hào)
-
no-open-quote 移除內(nèi)容的開(kāi)始引號(hào)
-
no-close-quote 移除內(nèi)容的閉合引號(hào)
-
url(url) 設(shè)置某種媒體（圖像，聲音，視頻等內(nèi)容）的鏈接地址
示例如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>123</title> <style> p:before { content:"天王蓋地虎- "; } p#testID:before { content:none; } </style> </head> <body> <p>寶塔鎮(zhèn)河妖</p> <p id="testID">強(qiáng)的很?。?！</p> </body> </html>
輸出結(jié)果：
示例如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥(niǎo)教程(runoob.com)</title> <style> p::before { content: open-quote; } p::after { content: close-quote; } </style> </head> <body> <p>天王蓋地虎-寶塔鎮(zhèn)河妖</p> </body> </html>
輸出結(jié)果：
（學(xué)習(xí)視頻分享：css視頻教程）
