css的content属性（又是补基础的一天）CSS 的 `content` 属性用于在元素的 `::before` 和

mdn文档地址

理解

CSS 的 content 属性用于在元素的 ::before 和 ::after 伪元素中插入内容。它通常用于在页面上添加修饰性内容，而不需要在 HTML 中添加额外的元素。content 属性只能在伪元素上使用，无法直接应用于普通的 HTML 元素。使用 content 属性插入的内容都是匿名的可替换元素。

基本语法

selector::before {
    content: "文本或其他内容";
}

selector::after {
    content: "文本或其他内容";
}

`content` 属性的值

字符串：可以插入文本内容。
```
p::before {
    content: "注意: ";
}
```
空字符串：插入一个空的内容。
```
p::before {
    content: "";
}
```
URL：插入一个图像或其他资源。URI 值会指定一个外部资源（比如图片）。如果该资源或图片不能显示，它就会被忽略或显示一些占位（比如无图片标志）。
```
p::after {
    content: url('icon.png');
}
```
属性值：可以插入与元素相关的属性值。将元素的 X 属性以字符串形式返回。如果该元素没有 X 属性，则返回一个空字符串。区分大小写的属性返回值依赖文挡的语言设定。
```
a::after {
    content: attr(X);
}
```
计数器：计数器可以指定两种不同的函数：counter() 或 counters()。

前面一个有两种形式：counter(name)或counter(name,style) 。产生的内容是该伪类元素指定名称的最小范围的计数；格式由 style 指定（默认是'decimal'——十进制数字）。

后一个函数同样也有两种形式:counters(name,string) 或 counters(name,string,style) 。

可以配合 counter-reset 和 counter-increment，插入一个计数器的值。

ol {
    counter-reset: list;
}
li::before {
    counter-increment: list;
    content: counter(list) ". ";
}

引号：通过 open-quote 和 close-quote 插入引号符号。这些值会被 quotes 中定义的字符串替换。
```
blockquote::before {
    content: open-quote;
}
blockquote::after {
    content: close-quote;
}
```
no-open-quote | no-close-quote：不会生产任何内容，但是会改变（增加或降低）引号层级。

使用场景

添加装饰性内容：可以用来在元素的前面或后面添加装饰性字符或符号，例如引号、星号等。
```
h1::before {
    content: "★ ";
    color: gold;
}
```

显示图标：可以在链接或按钮前后添加图标，增强视觉效果。

a::before {
    content: url('icon.png');
    margin-right: 8px;
}

自动编号：可以在列表中使用计数器自动生成编号，特别是在自定义列表样式时。

.steps {
    counter-reset: step;
}
.steps li::before {
    counter-increment: step;
    content: "Step " counter(step) ": ";
}

显示属性值：可以将元素的属性值（如 href、title）动态显示在页面上。
```
a::after {
    content: " (" attr(href) ")";
}
```

示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS Content Property Example</title>
  <style>
    h1::before {
      content: "💡 ";
      font-size: 1.5em;
    }
p:before{
  content: open-quote;
}
    p::after {
      content:close-quote " 📌";
    }

    a::after {
      content: " (" attr(href) ")";
      color: gray;
    }
  </style>
</head>
<body>
<h1>CSS Content Property</h1>
<p>This is a paragraph with an icon after it.</p>
<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/content">Visit Example</a>
</body>
</html>

注意事项

content 属性只能在伪元素上使用（即 ::before 和 ::after），不能直接用于常规 HTML 元素。
content 插入的内容不会影响文档流，插入的文本和图像会显示在元素的前或后，但不会占用元素的内容空间。
使用 content 属性时要注意浏览器的兼容性，现代浏览器都支持这个属性，但在较旧的浏览器中可能存在一些限制。

css的content属性（又是补基础的一天）

mdn文档地址

理解

基本语法

content 属性的值

使用场景

示例

注意事项

浏览器兼容

`content` 属性的值