# CSS Emphasis Marks 文本强调标记

> 我们常常会在网页中对文本某一关键词进行凸显强调，加粗、高亮、下划线等等一系列相对匹配的样式去装饰进而引起用户注意，今天我们看看另一种实现方法text-emphasis。

Author: DeathGhost
Published: 2020-06-18 23:50:30
Category: css
Canonical: https://www.deathghost.cn/article/css/77
Keywords: CSS, Emphasis, text-emphasis, text-emphasis-style, text-emphasis-color, text-emphasis-position, 强调, 标记, 装饰

页面文本段落中，有时我们会根据上下文语境对某一关键词进行凸显（如，加粗、高亮、斜体、文本渐变、下划线等等）标记对文本中某一关键词进行装饰，以便引起用户的关注，进而让用户理解段落文本中心意思。

现在我们可以了解一个新的文本强调装饰属性，即：text-emphasis。

看上去没多大用途，实际项目中可能很少用到，但是，多一份关注，多一份选择嘛，了解一下也无妨。

![CSS Emphasis Marks](https://www.deathghost.cn/public/upload/article/2020/06/19/1592499134921447.jpg)

CSS Emphasis Marks

首先，我们了解下关于这个Emphasis标记的属性。

字面上我们可以看出是强调的意思，其读音 [ˈemfəsɪs]。

text-emphasis是text-emphasis-style与text-emphasis-color的缩写。还有一个属性是text-emphasis-position，不在text-emphasis的缩写范围内。即：

p{text-emphasis: '•'orange}
p{text-emphasis-style: '•'; text-emphasis-color: orange;}
两者渲染结果是一样的。

其次，了解下具体属性。

1、text-emphasis-style属性 - 强调标记的样式。

text-emphasis-style: none | [ [ filled | open ] || [ dot | circle | double-circle | triangle | sesame ] ] | <string>
none 初始值，无标记。

[ [ filled | open ] || [ dot | circle | double-circle | triangle | sesame ] ] 关键字装饰

dot &bull; | circle ● | double-circle ◉ | triangle ▲ | sesame ﹅
string 自定义字符装饰。 如一些特殊字符或文本等等。

2、text-emphasis-color属性 - 强调标记颜色

text-emphasis-color: color;
若不设置此属性值，则会根据其元素颜色而定。如：

p{text-emphasis-style: '&bull;'; text-emphasis-position: under right;color:blue;}
// 这里我们移除 text-emphasis-color: orange;属性，则会与文本颜色一致。
3、text-emphasis-position属性 - 强调标记的位置。

text-emphasis-position: [ over | under ] && [ right | left ]
如，强调装饰于文本下方，即：

p{text-emphasis-style: '&bull;'; text-emphasis-color: orange; text-emphasis-position: under right;}

![CSS  Emphasis Marks 文本强调装饰 示例图](https://www.deathghost.cn/public/upload/article/2020/06/19/1592498436538221.jpg)

CSS  Emphasis Marks 文本强调装饰 示例图

最后，兼容性。

本问示例运行于Firefox浏览器，若chrome需要加-webkit-前缀暂时，更多参考CANIUSE查看兼容情况。

测试后，总体来说暂时使用场景或兼容还是有一定局限性，具体根据实际场景而定吧，就当多了个选择，将其储备起来。

## Related

- Previous: [仅使用CSS制作轮播](https://www.deathghost.cn/article/css/72)
- Next: [CSS container容器查询](https://www.deathghost.cn/article/css/112)