Подчёркивание текста

Линия базовой строки Широко доступно

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

Свойство text-emphasis CSS применяет значки выделения к тексту (кроме пробелов и управляющих символов). Это сокращённое свойство для сокращённых свойств text-emphasis-style и text-emphasis-color.

Попробуйте

Свойство text-emphasis существенно отличается от text-decoration. Свойство text-decoration не наследуется, и заданное оформление применяется ко всему элементу. Однако, свойство text-emphasis наследуется, что позволяет изменять значки выделения для дочерних элементов.

Размер символа выделения, как у символов ruby, составляет примерно 50% от размера шрифта, и text-emphasis может повлиять на межстрочный интервал, когда текущий ведущий недостаточен для значков.

Примечание: text-emphasis не сбрасывает значение text-emphasis-position. Это связано с тем, что если стиль и цвет знаков выделения могут различаться в тексте, то их положение крайне маловероятно будет разным. В очень редких случаях, когда это необходимо, используйте свойство text-emphasis-position.

Составные свойства

Это сокращённое свойство для следующих свойств CSS:

Синтаксис

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

/* <string> value */
text-emphasis: "x";
text-emphasis: "点";
text-emphasis: "\25B2";
text-emphasis: "*" #555;
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 #555;

/* 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-style`: `none` `text-emphasis-color`: `currentcolor`
Применяется к	все элементы
Наследуется	да
Вычисленное значение	как каждое из свойств сокращения: `text-emphasis-style`: как указано `text-emphasis-color`: вычисленный цвет
Тип анимации	как каждое из свойств сокращения: `text-emphasis-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>

Примеры

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

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

CSS

h2 {
  text-emphasis: triangle #d55;
}

HTML

<h2>This is important!</h2>

Результат

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

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

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet	WebView Android
`text-emphasis`	9925	9979	46	8515	77	9925	46	6814	77	18.01.5	994.4

См. также

Вспомогательные свойства text-emphasis-style, text-emphasis-color.
Свойство 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