css中content属性你了解多少？

在CSS中，content属性通常与伪元素（如 ::before 和 ::after）一起使用，用于在元素的内容之前或之后插入生成的内容。这个属性不接受常规的HTML内容，而是接受一些特定的值，如字符串、属性值、计数器值等。

以下是一些关于content属性的基本用法和示例：

经常用的的案例：

插入字符串

你可以使用content属性插入任何字符串。

p::before {
   
   
  content: "Before content: ";
}

p::after {
   
   
  content: " After content.";
}

在这个例子中，每个<p>元素之前都会插入文本"Before content: “，之后都会插入文本” After content."。

插入属性值

你可以使用attr()函数来插入元素的属性值。

a::after {
   
   
  content: " (" attr