text-decoration-line

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

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

Свойство text-decoration-line CSS задаёт вид декорации текста в элементе, например, подчёркивание или зачёркивание.

Попробовать

При одновременной установке нескольких свойств оформления строк может быть удобнее использовать сокращённое свойство text-decoration вместо этого.

Синтаксис

/* Single keyword */
text-decoration-line: none;
text-decoration-line: underline;
text-decoration-line: overline;
text-decoration-line: line-through;
text-decoration-line: blink;

/* Multiple keywords */
text-decoration-line: underline overline; /* Two decoration lines */
text-decoration-line: overline underline line-through; /* Multiple decoration lines */

/* Global values */
text-decoration-line: inherit;
text-decoration-line: initial;
text-decoration-line: revert;
text-decoration-line: revert-layer;
text-decoration-line: unset;

Свойство text-decoration-line задаётся как none, или одно или несколько разделённых пробелами значений из списка ниже.

Значения

none: Не производит никакой декорации текста.
underline: Каждая строка текста имеет декоративную линию под ней.
overline: Каждая строка текста имеет декоративную линию над ней.
line-through: Каждая строка текста имеет декоративную линию, проходящую по середине.
blink: Текст мигает (чередуется между видимым и невидимым). Соответствующие пользовательские агенты могут не мигать текстом. Это значение устарело в пользу CSS-анимаций.

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

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

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

text-decoration-line = 
  none                                                |
  [ underline || overline || line-through || blink ]

Примеры

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

<p class="wavy">Here's some text with wavy red underline!</p>
<p class="both">This text has lines both above and below it.</p>

.wavy {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: red;
}

.both {
  text-decoration-line: underline overline;
}

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

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

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

	Рабочие столы					Мобильные
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`text-decoration-line`	57	79	366–39	44	12.18	57	366–39	43	12.28	7.0	57
`blink`	57 Значение `blink` не оказывает никакого влияния.	79 Значение `blink` не оказывает никакого влияния.	26 Значение `blink` не оказывает никакого влияния.	44	8	57 Значение `blink` не оказывает никакого влияния.	26 Значение `blink` не оказывает никакого влияния.	43	8	7.0 Значение `blink` не оказывает никакого влияния.	57 Значение `blink` не оказывает никакого влияния.
`grammar-error`	121	121	Нет	107	Нет	121	Нет	81	Нет	25.0	121
`line-through`	≤83	83	≤72	69	≤13.1	83	79	59	≤13.4	13.0	83
`none`	≤83	83	≤72	69	≤13.1	83	79	59	≤13.4	13.0	83
`overline`	≤83	83	≤72	69	≤13.1	83	79	59	≤13.4	13.0	83
`spelling-error`	121	121	Нет	107	Нет	121	Нет	81	Нет	25.0	121
`underline`	≤83	83	≤72	69	≤13.1	83	79	59	≤13.4	13.0	83

См. также

При одновременной установке нескольких свойств оформления строк может быть удобнее использовать сокращённое свойство text-decoration вместо этого, которое также включает:
text-underline-offset

© 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-decoration-line