CSS text-decoration, примеры. Как изменить стиль подчеркивания

Свойство 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 не поддерживается почти всеми браузерами (идет уже 2016 год).

Примеры с подчеркиваниями

Пример 1. Простое подчеркивание

<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>

Вот как это выглядит на странице:

Обычный текст.

Нижнее подчеркивание

Верхнее подчеркивание

Верхнее и нижнее подчеркивание

Пример 2. Зачеркнутый текст

<html>
<head>
<style>
	.primer3{
	text-decoration: line-through;;
	}
</style>
</head>
<body>
	Обычный текст. <font class="primer3">Зачеркнутый текст</font>
</body>
</html>

Вот как это выглядит на странице:

Обычный текст. Зачеркнутый текст

Пример 3. Меняем цвет и тип подчеркивания

<html>
<head>
<style>
	.primer4{
	text-decoration: underline;
	text-decoration-style: dotted;	
	text-decoration-color: red;
	}
</style>
</head>
<body>
	Обычный текст. <font class="primer3">Красное подчеркивание с пунктирной линией</font>
</body>
</html>

Вот как это выглядит на странице:

Обычный текст.
Красное подчеркивание с пунктирной линией

Примечание

Если вы не видите каких-то изменений в последнем примере, то можно попробовать использовать проверенный способ с помощью свойства border-bottom:

border-bottom: 1px datted red;

Для обращения к text-decoration из JavaScript нужно писать следующую конструкцию:

object.style.textDecoration="VALUE"

← Перейти в каталог CSS уроков