text-emphasis

尝试一下

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 可能会影响行高。

组成属性

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

• text-emphasis-color
• text-emphasis-style

语法

/* 初始值 */
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 = 
  <'text-emphasis-style'>  ||
  <'text-emphasis-color'>  

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

<text-emphasis-color> = 
  <color>  

示例

使用强调标记和强调色的标题

此示例绘制了一个标题，并使用三角形来强调每个字符。

CSS

h2 {
  text-emphasis: triangle #d55;
}

HTML

<h2>这很重要！</h2>

结果

规范

浏览器兼容性

参见

• 全称属性 text-emphasis-style、text-emphasis-color
• 用于定义强调标记位置的 text-emphasis-position 属性。