CSS text-emphasis-position 语法
在 CSS 中，text-emphasis-position 属性用于定义文本 “强调标记的位置”。需要注意的是，如果没有足够空间来放置强调标记，则会增加行高。
语法：
text-emphasis-position: 关键字;说明：
text-emphasis-position 属性取值有 4 种，如下表所示。
| 取值 | 说明 |
|---|---|
| over right（默认值） | 上方靠右 |
| over left | 上方靠左 |
| under right | 下方靠右 |
| under left | 下方靠左 |
注意，text-emphasis-position 属性只有当 text-emphasis-style 属性的值不是 none 时才会生效。
text-emphasis “家族”
text-emphasis “家族” 其实有 4 个属性，分别如下。
- text-emphasis
- text-emphasis-color
- text-emphasis-style
- text-emphasis-position
需要注意的是，text-emphasis 只是 text-emphasis-color 和 text-emphasis-style 这 2 个属性的简写，并不包括 text-emphasis-position。
CSS text-emphasis-position 摘要
| 属于 | CSS 文本属性 |
|---|---|
| 使用频率 | 低 |
| 是否继承 | 是 |
| 默认值 | 取决于 writing-mode 和 direction |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
CSS text-emphasis-position 示例
接下来，我们通过一个简单的例子来讲解一下 CSS text-emphasis-position 属性是如何使用的。
示例：text-emphasis-position 基本用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
p {
font-size: 30px;
text-emphasis: circle red;
}
p:nth-of-type(1) { text-emphasis-position: over right; }
p:nth-of-type(2) { text-emphasis-position: over left; }
p:nth-of-type(3) { text-emphasis-position: under right; }
p:nth-of-type(4) { text-emphasis-position: under left; }
</style>
</head>
<body>
<p>绿叶网ABC</p>
<p>绿叶网ABC</p>
<p>绿叶网ABC</p>
<p>绿叶网ABC</p>
</body>
</html>页面效果如下图所示。
提示: 强调标记的首选语言取决于语言，比如 “中文” 首选位置为 under right，“日语” 首选位置为 over right。
