2000字范文,分享全网优秀范文,学习好帮手!
2000字范文 > CSS :before :after 伪类选择器

CSS :before :after 伪类选择器

时间:2024-05-29 09:50:18

相关推荐

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。