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