text-emphasis

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2022年3月⁩.

CSS 属性 text-emphasis 将强调标记应用到除去空格和控制字符的文本。这个值是 text-emphasis-style 和 text-emphasis-color 的简写属性。

尝试一下

text-emphasis: none;

text-emphasis: filled red;

text-emphasis: "x";

text-emphasis: filled double-circle #ffb703;

<section id="default-example">
  <p>
    I'd far rather be
    <span class="transition-all" id="example-element">happy than right</span>
    any day.
  </p>
</section>

p {
  font: 1.5em sans-serif;
}

text-emphasis 属性与 text-decoration 完全不同。text-decoration 属性不可继承，并且指定的装饰会应用于整个元素。然而，text-emphasis 是可继承的，这意味着可以为其子元素更改强调标记。

强调符号的大小，例如注音字符，大约是字体大小的 50%，在当前行间距不足以容纳标记时，text-emphasis 可能会影响行高。

备注： text-emphasis 不会重置 text-emphasis-position 的值。这是因为如果文本中的强调标记的样式和颜色不同，它们的位置几乎不会变化。在极少数情况需要这样做时，可以使用 text-emphasis-position 属性。

组成属性

此属性是以下 CSS 属性的简写：

语法

css

/* 初始值 */
text-emphasis: none; /* 没有强调标记 */

/* <string> 值 */
text-emphasis: "x";
text-emphasis: "点";
text-emphasis: "\25B2";
text-emphasis: "*" #555;
text-emphasis: "foo"; /* 不应使用。它可能被计算或渲染为仅“f” */

/* 关键字值 */
text-emphasis: filled;
text-emphasis: open;
text-emphasis: filled sesame;
text-emphasis: open sesame;

/* 关键字值与色彩值结合 */
text-emphasis: filled sesame #555;

/* 全局值 */
text-emphasis: inherit;
text-emphasis: initial;
text-emphasis: revert;
text-emphasis: revert-layer;
text-emphasis: unset;

取值

none: 没有强调标记。
filled: 形状填充为纯色。如果 filled 和 open 都未被设置，这是默认设置。
open: 形状为空心。
dot: 显示小圆点作为标记。填充圆点是 '•'（U+2022），空心圆点是 '◦'（U+25E6）。
circle: 显示大圆圈作为标记。填充圆圈是 '●'（U+25CF），空心圆圈是 '○'（U+25CB）。在水平书写模式下，如果没有指定其他形状，则默认为此形状。
double-circle: 显示双重圆圈作为标记。填充双重圆圈是 '◉'（U+25C9），空心双重圆圈是 '◎'（U+25CE）。
triangle: 显示三角形作为标记。填充三角形是 '▲'（U+25B2），空心三角形是 '△'（U+25B3）。
sesame: 显示芝麻点形状作为标记。填充芝麻点是 '﹅'（U+FE45），空心芝麻点是 '﹆'（U+FE46）。在垂直书写模式下，如果没有指定其他形状，则默认为此形状。
<string>: 将指定的字符串作为标记显示。不应指定多于一个字符的 <string>。用户代理（UA）可能会截断或忽略超过一个字素簇的字符串。
<color>: 指定用作强调色的颜色。如果未定义，该值默认为 currentcolor。

形式定义

初始值	该简写所对应的每个属性： `text-emphasis-style`: `none` `text-emphasis-color`: `currentcolor`
适用元素	所有元素
是否是继承属性	是
计算值	该简写所对应的每个属性： `text-emphasis-style`: as specified `text-emphasis-color`: 颜色计算值
动画类型	该简写所对应的每个属性： `text-emphasis-color`: a color `text-emphasis-style`: 离散值

形式语法

text-emphasis = 
  <'text-emphasis-style'>  ||
  <'text-emphasis-color'>  

<text-emphasis-style> = 
  none                                                |
  [ [ filled | open ] || [ dot | circle | double-circle | triangle | sesame ] ]  |
  <string>                                            

<text-emphasis-color> = 
  <color>