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:"链接";}