
html.okpython.net
Основы создания сайтов
CSS :: Свойство text-decoration-line
css-свойство text-decoration-line (от англ. text decoration line – декоративная линия текста) используется для установки типа декоративной линии текста. При этом разрешается добавлять к одному и тому же фрагменту текста сразу несколько линий, перечисляя значения через пробел.
Характеристики
- Значение по умолчанию: none.
- Применяется: ко всем элементам.
- Наследуется: нет.
- Анимируется: нет.
- JavaScript: object.style.textDecorationLine="value".
Синтаксис
text-decoration-line: [ line-through || overline || underline ] | none
Значения
- line-through – отображает текст перечеркнутым.
- overline – оформляет текст надчеркнутым.
- underline – оформляет текст подчеркнутым.
- none – используется в качестве значения по умолчанию, отменяет все эффекты, включая подчеркивание у ссылок, что бывает очень полезно при формировании меню.
Ссылки
Официальный сайт W3C: https://drafts.csswg.org/css-text-decor-3/#propdef-text-decoration-line
Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/text-decoration-line
Примеры
HTML
Результат
htmlCodes

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример №1</title> <style> p{ width: 400px; margin: 2em; font-size: 2em; } .span_1{ text-decoration-line: underline; text-decoration-style: dashed; text-decoration-color: rgba(255,0,0,0.3); } .span_2{ text-decoration-line: overline; text-decoration-style: dotted; text-decoration-color: rgb(0,255,0); } .span_3{ text-decoration-line: line-through; text-decoration-style: double; text-decoration-color: orange; } .span_4{ text-decoration-line: underline overline; text-decoration-style: wavy; text-decoration-color: #0000FF; } .span_5{ text-decoration: underline solid hsl(90,80%,40%); } </style> </head> <body> <p class="p_1"> <span class="span_1">Текст №1</span> <br><br> <span class="span_2">Текст №2</span> <br><br> <span class="span_3">Текст №3</span> <br><br> <span class="span_4">Текст №4</span> <br><br> <span class="span_5">Текст №5</span> </p> </body> </html>
Пример №1