text-decoration-style

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

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

Свойство text-decoration-style CSS задаёт стиль линий, указанных свойством text-decoration-line. Стиль применяется ко всем линиям, установленным с помощью text-decoration-line.

Попробуйте

Если заданное оформление имеет определённый семантический смысл, например, зачёркнутая линия означает, что текст был удалён, авторам рекомендуется обозначать этот смысл с помощью тега HTML, например, <del> или <s>. Поскольку браузеры могут в некоторых случаях отключить стили, семантический смысл в такой ситуации не исчезнет.

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

Синтаксис

/* Keyword values */
text-decoration-style: solid;
text-decoration-style: double;
text-decoration-style: dotted;
text-decoration-style: dashed;
text-decoration-style: wavy;

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

Значения

solid: Рисует одну линию.
double: Рисует двойную линию.
dotted: Рисует пунктирную линию.
dashed: Рисует штриховую линию.
wavy: Рисует волнистую линию.
-moz-none: Не рисует линию. Используйте text-decoration-line: none вместо этого.

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

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

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

text-decoration-style = 
  solid   |
  double  |
  dotted  |
  dashed  |
  wavy

Примеры

Установка волнистой подчёркивания

Следующее создаёт красную волнистую подчёркивание:

CSS

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

HTML

<p class="wavy">This text has a wavy red line beneath it.</p>

Результаты

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

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

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`text-decoration-style`	57	79	366–39	44	12.18	57	366–39	43	12.28	7.0	57
`wavy`	57	79	6	44	8	57	6	43	8	7.0	57

См. также

При установке нескольких свойств оформления строк одновременно, может быть удобнее использовать сокращённое свойство text-decoration вместо этого.
text-decoration-line
text-decoration-color
text-decoration-thickness
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-style