Свойство CSS text-decoration-line
Используйте свойство text-decoration-line для задания типа линии оформления текста. Значения свойства и примеры.
Свойство text-decoration-line задаёт тип линии для оформления текста — underline (подчёркивание), overline (надчёркивание), line-through (зачёркивание) или любую их комбинацию.
Это одно из четырёх отдельных свойств, составляющих сокращённое свойство text-decoration. Остальные — text-decoration-color, text-decoration-style и text-decoration-thickness. Используйте text-decoration-line отдельно, когда нужно изменить только тип линий, не затрагивая цвет, стиль и толщину.
На этой странице описаны допустимые значения свойства, способы комбинирования нескольких линий, связь со сокращённым свойством и некоторые практические особенности.
Свойство text-decoration-line полностью поддерживается всеми современными браузерами без вендорных префиксов. Оно относится к свойствам CSS3.
Зачем использовать text-decoration-line
Частая причина обращаться к отдельному свойству — добавить или убрать одну линию, не затрагивая остальное оформление. Например, ссылки по умолчанию подчёркнуты; задав text-decoration-line: none, можно убрать это подчёркивание, оставив возможность задать свой цвет линии через сокращённое свойство. Свойство также принимает несколько ключевых слов, что позволяет добавить подчёркивание и надчёркивание к одному тексту в одном объявлении.
| Начальное значение | none |
|---|---|
| Применяется к | Всем элементам. Также применяется к ::first-letter и ::first-line. |
| Наследуется | Нет. |
| Анимируется | Нет. |
| Версия | CSS3 |
| DOM-синтаксис | object.style.textDecorationLine = "overline underline"; |
Синтаксис
Синтаксис CSS text-decoration-line
text-decoration-line: none | [ underline || overline || line-through ] | initial | inherit;Ключевое слово none используется самостоятельно, а underline, overline и line-through можно комбинировать в одном объявлении, разделяя пробелами — порядок значений не важен:
/* a single line */
text-decoration-line: underline;
/* two lines at once */
text-decoration-line: underline overline;
/* all three */
text-decoration-line: underline overline line-through;Пример свойства text-decoration-line:
Пример кода CSS text-decoration-line
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
text-decoration-line: overline;
}
</style>
</head>
<body>
<h2>Text-decoration-line property example</h2>
<p>Lorem Ipsum is simply dummy text...</p>
</body>
</html>Результат
Пример свойства text-decoration-line со значением "underline":
Пример CSS text-decoration-line со значением underline
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
text-decoration-line: underline;
}
</style>
</head>
<body>
<h2>Text-decoration-line property example</h2>
<p>Lorem Ipsum is simply dummy text...</p>
</body>
</html>Пример свойства text-decoration-line со значением "line-through":
Пример CSS text-decoration-line со значением line-through
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
text-decoration-line: line-through;
}
</style>
</head>
<body>
<h2>Text-decoration-line property example</h2>
<p>Lorem Ipsum is simply dummy text...</p>
</body>
</html>Пример свойства text-decoration-line со всеми значениями:
Пример CSS text-decoration-line со всеми значениями
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
margin: 20px 0;
}
div.t1 {
text-decoration-line: none;
}
div.t2 {
text-decoration-line: underline;
}
div.t3 {
text-decoration-line: line-through;
}
div.t4 {
text-decoration-line: overline;
}
</style>
</head>
<body>
<h2>Text-decoration-line property example</h2>
<div class="t1">
Lorem Ipsum is simply dummy text...
</div>
<div class="t2">
Lorem Ipsum is simply dummy text...
</div>
<div class="t3">
Lorem Ipsum is simply dummy text...
</div>
<div class="t4">
Lorem Ipsum is simply dummy text...
</div>
</body>
</html>Комбинирование text-decoration-line с сокращённым свойством
Поскольку text-decoration-line управляет только линиями, его обычно используют совместно с другими отдельными свойствами — или просто применяют сокращённое свойство text-decoration, которое задаёт их все сразу. Следующие два правила дают одинаковый результат:
/* longhands */
p {
text-decoration-line: underline;
text-decoration-color: red;
text-decoration-style: wavy;
}
/* shorthand equivalent */
p {
text-decoration: underline red wavy;
}Использование отдельного свойства оправдано, когда нужно переопределить только одну часть оформления, не переписывая его целиком — например, изменить только тип линии при :hover, сохранив унаследованный цвет и стиль.
Примечание о доступности
text-decoration-line: line-through — чисто визуальный эффект: вспомогательные технологии не сообщают пользователям, что текст зачёркнут. Чтобы донести смысл «этот контент удалён» до пользователей программ чтения с экрана, используйте семантические элементы <del> или <s>, а не полагайтесь только на CSS.
Значения
| Значение | Описание | Попробовать |
|---|---|---|
| none | Линия не задана. | Попробовать » |
| underline | Задаёт линию под текстом. | Попробовать » |
| overline | Задаёт линию над текстом. | Попробовать » |
| line-through | Задаёт линию через текст. | Попробовать » |
| initial | Устанавливает значение свойства по умолчанию. | Попробовать » |
| inherit | Наследует значение свойства от родительского элемента. |
Ранее свойство text-decoration-line поддерживало значение blink, которое заставляло текст мигать. Теперь оно устарело и большинство браузеров его игнорируют, поэтому не используйте его в новом коде.
Связанные свойства
- text-decoration — сокращённое свойство, задающее тип линии, цвет, стиль и толщину вместе.
- text-decoration-color — задаёт цвет линии оформления.
- text-decoration-style — задаёт стиль линии:
solid,double,dotted,dashedилиwavy.