CSS3 text-emphasis 属性（保姆级教程）

什么是 CSS3 text-emphasis 属性？

在网页设计中，我们常常需要强调某些文字内容，比如古文中的注音符号、诗歌的重音标记，或者学习材料中的重点词汇。传统的做法是用 <mark> 标签、加粗字体或颜色变化来实现，但这些方式在语义上不够精准，也不够灵活。直到 CSS3 的出现，text-emphasis 属性应运而生，为文本强调提供了更优雅、更语义化的解决方案。

CSS3 text-emphasis 属性 是专门用于在文本字符下方或上方添加小标记（如点、圆圈、三角等）的样式控制工具。它特别适合用于注音、教学、古文排版等场景，能够清晰地展示出哪些文字是需要特别关注的。

想象一下，你在阅读一篇《诗经》的现代译文，其中“关关雎鸠”中的“雎鸠”二字是生僻词，你希望在它下方加一个小点来提示读者注意发音或含义。用 text-emphasis 就能轻松实现，而无需额外插入 HTML 标签。

这个属性不是什么新奇功能，但它在实际项目中的使用率却不高，原因可能是开发者对它的理解不够深入，或者不知道它能解决什么问题。今天，我们就来深入拆解这个被低估的 CSS3 特性。

text-emphasis 属性的基本语法与值

text-emphasis 是一个复合属性，可以同时设置三个子属性：

• text-emphasis-style：定义强调符号的样式（如点、圆圈、三角等）
• text-emphasis-color：定义强调符号的颜色
• text-emphasis-position：定义符号的位置（在文字下方或上方）

我们可以通过简写形式一次性设置这三个值，也可以分别设置。

基本语法格式：

text-emphasis: style color position;

例如：

text-emphasis: dot red over;

这行代码的意思是：在文字上方添加红色的“点”作为强调符号。

值的说明：

⚠️ 注意：text-emphasis-position 的值为 over 时，符号会出现在文字上方；under 则在下方。默认是 under。

常见的强调符号样式演示

我们来看几个实际例子，帮助你直观感受不同 text-emphasis-style 的效果。

使用点（dot）

.emphasis-dot {
  text-emphasis: dot blue;
}

这个设置会在每个字符下方添加一个蓝色的小点。适合用于强调短语中的关键词，比如“重点”一词，用点来标记，显得简洁不突兀。

使用圆圈（circle）

.emphasis-circle {
  text-emphasis: circle green;
}

圆圈比点更显眼，适合需要更强视觉提示的场景。比如在儿童读物中，标注生字发音时，用圆圈会更清晰。

使用双圆圈（double-circle）

.emphasis-double {
  text-emphasis: double-circle orange;
}

双圆圈是一种装饰性更强的样式，常见于古籍排版或艺术类网页设计中。它能营造出一种“古风”氛围，特别适合诗词、文言文类内容。

使用三角形（triangular）

.emphasis-triangle {
  text-emphasis: triangular purple;
}

三角形符号具有方向性，给人一种“指向”或“提醒”的感觉，适合用于提示性内容，比如“注意：此段需背诵”。

使用芝麻（sesame）——特殊符号

.emphasis-sesame {
  text-emphasis: sesame black;
}

sesame 是一个比较特别的值，它会使用类似“芝麻粒”的小点，视觉上更密集、更有颗粒感，适合用于多字强调或复杂文本的标注。

设置强调符号颜色与位置

text-emphasis 不仅能改符号形状，还能精确控制颜色和位置，让你的强调效果更符合整体设计风格。

控制颜色

.highlight-red {
  text-emphasis: dot red;
}

.highlight-pink {
  text-emphasis: circle pink;
}

.highlight-transparent {
  text-emphasis: dot transparent;
}

使用 transparent 可以让符号不显示，但依然保留其占位空间，适合做占位或动画过渡效果。

控制位置（over / under）

.emphasis-over {
  text-emphasis: dot red over;
}

.emphasis-under {
  text-emphasis: circle blue under;
}

• over：符号出现在文字上方，适合与上方留白较少的排版搭配。
• under：符号在文字下方，是默认行为，最常见。

💡 小技巧：在中文排版中，由于汉字本身笔画复杂，under 更自然；而在英文诗歌中，over 常用于重音标记（如音节强调）。

实际应用场景：古文注音与学习材料排版

CSS3 text-emphasis 属性 在教育类网站、古籍数字化项目中非常实用。我们来看一个真实案例。

假设你正在做一个“唐诗三百首”学习网站，想为每首诗中的生僻字加注音标记。

<p class="poem">
  关关雎鸠，在河之洲。窈窕淑女，君子好逑。
</p>

.poem {
  font-size: 18px;
  line-height: 1.6;
  text-align: center;
}

.poem .emphasis {
  text-emphasis: dot #c00;
}

<p class="poem">
  关关雎鸠，在河之<em class="emphasis">洲</em>。窈窕淑女，君子好逑。
</p>

这样，当用户阅读时，洲 字下方会有一个红色小点，提示这是一个需要特别注意的字。整个过程无需添加额外标签，也不破坏语义结构，完全靠 CSS 控制样式。

✅ 优势总结：

• 无需额外 HTML 标签
• 支持响应式（在移动设备上依然有效）
• 语义清晰，可维护性强
• 可与动画、过渡结合使用

兼容性与浏览器支持

虽然 text-emphasis 是 CSS3 的标准属性，但在一些老旧浏览器中支持有限。建议在实际项目中做兼容性处理。

浏览器支持情况（2024 年）：

⚠️ 提示：如果必须支持 IE，可以使用 ::before 伪元素手动添加符号，但会增加 HTML 代码复杂度。

前向兼容写法（推荐）：

.emphasis {
  /* 降级处理：IE 不支持时使用伪元素 */
  text-emphasis: dot red;
  /* IE 下无效，但其他浏览器正常 */
}

/* 降级方案：通过伪元素模拟 */
.emphasis::before {
  content: "•";
  color: red;
  font-size: 0.8em;
  margin-right: 0.1em;
  display: inline-block;
  vertical-align: bottom;
}

这样既能保证现代浏览器的优雅表现，又能为旧浏览器提供基本提示。

高级技巧：结合动画与交互

text-emphasis 支持与其他 CSS 特性结合，比如 transition 和 hover，实现动态强调效果。

示例：鼠标悬停时强调符号变大

.interactive-emphasis {
  text-emphasis: dot #333;
  transition: text-emphasis-size 0.3s ease;
}

.interactive-emphasis:hover {
  text-emphasis: dot #f00;
  /* 注意：text-emphasis-size 不是标准属性，但部分浏览器支持 */
}

虽然 text-emphasis-size 并非标准属性，但可以通过 font-size 和 transform 间接实现效果：

.interactive-emphasis {
  text-emphasis: dot #333;
  font-size: 1em;
}

.interactive-emphasis:hover {
  font-size: 1.2em;
  text-emphasis: dot #f00;
}

通过调整字体大小，也能让强调符号视觉上“放大”，增强交互反馈。

总结：为什么你应该使用 CSS3 text-emphasis 属性？

CSS3 text-emphasis 属性 并不是为了炫技而存在的，它解决了实际排版中“如何优雅地强调文字”的问题。尤其在教育、古籍、诗歌、语言学习等场景中，它提供了语义清晰、代码简洁、样式灵活的解决方案。

相比使用 <span> 或 <mark> 加样式的方式，text-emphasis 更符合“语义优先”的现代 CSS 设计理念。它让强调行为完全由 CSS 控制，HTML 结构保持干净，维护成本更低。

更重要的是，它已经得到了主流浏览器的广泛支持，只要不强制兼容 IE，就可以放心使用。

所以，下次当你需要在文字下加点、圈、三角时，别再手动加 <span> 了。用 CSS3 text-emphasis 属性，让代码更简洁，设计更专业。