CSS :before :after 伪类选择器

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