简要描述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伪元素,不能用于常规的元素。

发表评论

后才能评论