Свойство CSS `text-emphasis`

text-emphasis — это CSS-сокращённое свойство, которое применяет к тексту знаки акцентирования (за исключением пробелов и управляющих символов).

Попробуйте

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

Синтаксис

/* Initial value */
text-emphasis: none; /* No emphasis marks */

/* <string> value */
text-emphasis: "x";
text-emphasis: "点";
text-emphasis: "\25B2";
text-emphasis: "*" #555555;
text-emphasis: "foo"; /* Should NOT use. It may be computed to or rendered as 'f' only */

/* Keywords value */
text-emphasis: filled;
text-emphasis: open;
text-emphasis: filled sesame;
text-emphasis: open sesame;

/* Keywords value combined with a color */
text-emphasis: filled sesame #555555;

/* Global values */
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>. Пользовательский агент может усечь или проигнорировать строки, состоящие более чем из одного кластера графем.

<color>

Задаёт цвет знака. Если цвет не указан, используется currentColor.

Формальное определение

Формальный синтаксис

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

Примеры

Заголовок со знаками акцентирования заданной формы и цвета

В этом примере каждый символ заголовка выделен треугольником.

CSS

h2 {
  text-emphasis: triangle #dd5555;
}

HTML

<h2>This is important!</h2>

Результат

Спецификации

Совместимость с браузерами

См. также

• Полные свойства text-emphasis-style, text-emphasis-color.
• Свойство text-emphasis-position, позволяющее задать положение знаков акцентирования.