跳到主要内容

知道 CSS 有个 content 属性吗？有什么作用？有什么应用？

面试速答（30 秒版 TL;DR）​

  • content 用来设置生成内容（generated content），最常配合 伪元素 ::before / ::after 使用：决定“伪元素里显示什么”。
  • content 支持：字符串、attr(...)、url(...)、计数器 counter(...)、引号 open-quote/close-quote 等。
  • 高频坑：很多时候 ::before/::after 没写 content 就“没有伪元素”（不生成盒子或无内容可见），常用 content: "" 作为开关。

心智模型：content 是“伪元素的内容来源”​

一句话记忆：

  • 伪元素会生成一个“虚拟盒子”，content 决定这个盒子里放什么。

延伸阅读（已有更完整文档）：::before / ::after 的作用与单双冒号区别。

content 能写什么（面试常问几类）​

1）字符串​

.tag::before {
  content: "#";
}

2）读取 HTML 属性：attr(...)​

<span class="badge" data-count="3">消息</span>
.badge::after {
  content: attr(data-count);
  margin-left: 6px;
  font-weight: 700;
}

3）计数器：counter-reset / counter-increment / counter(...)​

ol {
  counter-reset: item;
}
li {
  counter-increment: item;
}
li::before {
  content: counter(item) ". ";
  color: #666;
}

4）空字符串：content: ""（最常用的“开关”）​

用于生成一个可样式化的盒子（线条/背景块/清除浮动等）：

.divider::after {
  content: "";
  display: block;
  height: 1px;
  background: #ddd;
}

常见应用（面试能落到工程就加分）​

  • 装饰性图标/角标：伪元素 + background-image 或 mask。
  • 分隔符：列表项之间 ::after { content: "|" }（注意最后一项处理）。
  • 清除浮动（clearfix）：::after { content:""; display:block; clear:both }。
  • 自动编号：计数器做目录/步骤条（可控性比手写序号更好）。

典型题 & 标准答法​

Q1：为什么我写了 ::before，却看不到效果？​

答：常见原因是没写 content 或写了 content: none，伪元素没有内容/不生成；其次检查 display、尺寸、颜色是否可见。

Q2：content 能不能“插入复杂 DOM”？​

答：不能。content 生成的是渲染层的内容，不是实际 DOM 节点，不能在里面嵌套真实元素；重要文案与可交互内容应放真实 DOM。

易错点/坑​

  • 可访问性：屏幕阅读器对 content 的朗读支持不一致，关键文本不要只放在伪元素里。
  • 可选中/可复制行为不稳定：不同浏览器/场景下对生成内容的选择与复制体验不完全一致。
  • attr(...) 的限制：它读取的是 HTML attribute，不是 DOM property（例如 value 的实时变化不一定反映在 attribute）。

速记要点（可背诵）​

  • content = 伪元素的内容来源；常用 content: "" 生成可样式化盒子。
  • 能放字符串/attr/counter/url；不能替代 DOM 结构与无障碍文本。