Свойство CSS text-decoration-line
Свойство text-decoration-line определяет вид линии, используемой для декорирования текста.
Свойство text-decoration-line является одним из свойств CSS3.
Свойство text-decoration-line принимает одно или несколько значений.
INFO
Свойство text-decoration-line полностью поддерживается во всех современных браузерах без использования вендорных префиксов.
| Начальное значение | 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;Пример использования свойства 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>Значения
| Значение | Описание | Запустить |
|---|---|---|
| none | Линия не указывается. | Запустить » |
| underline | Указывает линию под текстом. | Запустить » |
| overline | Указывает линию над текстом. | Запустить » |
| line-through | Указывает линию, перечеркивающую текст. | Запустить » |
| initial | Заставляет свойство использовать значение по умолчанию. | Запустить » |
| inherit | Наследует свойство от родительского элемента. |
Ранее свойство text-decoration-line поддерживало значение blink, заставляющее текст мигать, но это значение теперь устарело.
Практика
Какие из перечисленных являются допустимыми значениями для свойства 'text-decoration-line' в CSS?