简要描述CSS中 content属性的作用 ?
在CSS中,content
属性主要与伪元素::before
和::after
一起使用,用来插入生成的内容。它的值可以是普通文本,也可以是某些特定的关键字或者函数。
比如,我们可以使用content
属性在一个元素前后插入一些文本或者图标:
p::before {
content: "开始:";
}
p::after {
content: "……结束";
}
在这个例子中,每个<p>
元素前会显示“开始:”,后面会显示“……结束”。
此外,content
属性还可以与attr()
函数一起使用,来显示元素的某个属性:
a::after {
content: " (" attr(href) ")";
}
在这个例子中,每个链接(<a>
)元素后面会显示其href
属性的值,也就是链接的URL。
需要注意的是,content
属性只能用于::before
和::after
伪元素,不能用于常规的元素。