Свойство CSS text-decoration отвечает за оформление текста в плане подчеркиваний. Можно сделать нижнее, верхнее подчеркивание. Также можно зачеркнуть текст или применить все подчеркивания сразу.
Синтаксис CSS text-decoration
...
text-decoration: none|underline|overline|line-through|inherit;
...
Где:
none - текст без оформления
underline - нижнее подчеркивание
overline - верхнее подчеркивание
line-through - зачеркивание текста
blink - мерцающий текст (рекомендуется не применять это значение)
Можно указать несколько значений. Например
text-decoration: underline overline;
Как изменить стиль и цвет подчеркивания
Для изменения стиля подчеркивания есть специальное свойство text-decoration-style:
text-decoration-style: solid|double|dotted|dashed|wavy;
Где:
solid - сплошное подчеркивание
double - двойная линия
dotted - пунктирная линия
dashed - штриховая линия
wavy - волнистая линия
Для изменения цвета подчеркивания служит свойство text-decoration-color:
text-decoration-style: color;
color может принимать значения в виде RGB, названия цвета (см. коды и названия html цветов для сайта)
Примечание
К сожалению, свойство text-decoration-style и text-decoration-color не поддерживается почти всеми браузерами (идет уже 2020 год).
Пример 1. Простое подчёркивание
[html]
<html>
<head>
<style>
.primer1{
text-decoration: underline;
}
.primer2{
text-decoration: overline;
}
.primer1_2{
text-decoration: underline,overline;
}
</style>
</head>
<body>
Обычный текст.
<font class="primer1">Нижнее подчеркивание</font>
<font class="primer2">Верхнее подчеркивание</font>
<font class="primer1_2">Верхнее и нижнее подчеркивание</font>
</body>
</html>
[/html]
Код
<html>
<head>
<style>
.primer1{
text-decoration: underline;
}
.primer2{
text-decoration: overline;
}
.primer1_2{
text-decoration: underline,overline;
}
</style>
</head>
<body>
Обычный текст.
<font class="primer1">Нижнее подчеркивание</font>
<font class="primer2">Верхнее подчеркивание</font>
<font class="primer1_2">Верхнее и нижнее подчеркивание</font>
</body>
</html>
