text-emphasis-style

Базовая линия Широко доступная

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с марта 2022 года.

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

Попробуйте

Синтаксис

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

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

Начальное значение	`none`
Применяется к	всем элементам
Наследуется	да
Вычисленное значение	как указано
Тип анимации	дискретный

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

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

Примеры

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

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

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

Спецификация
CSS Text Decoration Module Level 3 # text-emphasis-style-property

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

	Рабочий стол					Мобильный
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`text-emphasis-style`	9925	9979	46	8515	77	9925	46	6814	77	18.01.5	994.4
`circle`	99	99	≤72	85	≤13.1	99	79	68	≤13.4	18.0	99
`dot`	99	99	≤72	85	≤13.1	99	79	68	≤13.4	18.0	99
`double-circle`	99	99	≤72	85	≤13.1	99	79	68	≤13.4	18.0	99
`filled`	99	99	≤72	85	≤13.1	99	79	68	≤13.4	18.0	99
`none`	99	99	≤72	85	≤13.1	99	79	68	≤13.4	18.0	99
`sesame`	99	99	≤72	85	≤13.1	99	79	68	≤13.4	18.0	99
`triangle`	99	99	≤72	85	≤13.1	99	79	68	≤13.4	18.0	99

См. также

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

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/text-emphasis-style