【CSS相关】css 属性 content 有什么作用（约215字）

css 属性 content 有什么作用

content 属性主要用于在 ::before 和 ::after 伪元素中插入额外的内容或样式。

通过设置 content 属性，可以在元素的前面或后面插入指定的内容，包括文本、图标、计数等。它可以接受各种值，如字符串、引用、计数器等。

例如，可以使用 content 属性在元素前面插入一个文本字符：

    .element::before {
      content: "→";
    }

上述代码将在 .element 元素的前面插入一个箭头字符。

此外，content 属性还可以与其他 CSS 属性一起使用，例如结合 attr() 函数来获取元素的属性值并插入到内容中：

    .element::before {
      content: attr(data-text);
    }

上述代码会将元素的 data-text 属性值插入到 .element 元素的前面作为内容。

需要注意的是，content 属性只能用于 ::before 和 ::after 伪元素中，并且必须配合 display 属性设置为 inline 或 inline-block 才能生效。