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

Свойство text-emphasis-style CSS задаёт внешний вид знаков выделения. Его также можно задать и сбросить с помощью сокращённого свойства text-emphasis.

Попробуйте

text-emphasis-style: none;

text-emphasis-style: triangle;

text-emphasis-style: "x";

text-emphasis-style: filled double-circle;

<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;
}

Синтаксис

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

/* <string> values */
text-emphasis-style: "x";
text-emphasis-style: "\25B2";
text-emphasis-style: "*";

/* Keyword values */
text-emphasis-style: filled;
text-emphasis-style: open;
text-emphasis-style: dot;
text-emphasis-style: circle;
text-emphasis-style: double-circle;
text-emphasis-style: triangle;
text-emphasis-style: filled sesame;
text-emphasis-style: open sesame;

/* Global values */
text-emphasis-style: inherit;
text-emphasis-style: initial;
text-emphasis-style: revert;
text-emphasis-style: revert-layer;
text-emphasis-style: 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>. Пользовательский агент может обрезать или игнорировать строки, состоящие более чем из одного графемного кластера.

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

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

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

Примеры

Базовый пример

h2 {
  -webkit-text-emphasis-style: sesame;
  text-emphasis-style: sesame;
}

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

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

См. также

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