CSS :: Свойство text-decoration

Сокращенное css-свойство text-decoration (от англ. text decoration – украшение текста) используется для выделения текста подчеркиванием и позволяет в одном объявлении задавать тип (text-decoration-line), стиль (text-decoration-style) и цвет декоративной линий (text-decoration-color), перечисляя их через пробел в любом порядке. При этом тип линии должен указываться обязательно, остальные параметры можно опускать, тогда браузер просто применит значения по умолчанию.

Характеристики

Значение по умолчанию: none.
Применяется: ко всем элементам.
Наследуется: нет.
Анимируется: см. каждое свойство.
JavaScript: object.style.textDecoration="value".

Синтаксис

text-decoration: text-decoration-line || text-decoration-style || text-decoration-color

Значения

Любые комбинации значений свойств text-decoration-line, text-decoration-style и text-decoration-color. При этом если значение какого-нибудь свойства не будет указано, браузер просто применит значение по умолчанию.

Ссылки

Официальный сайт W3C: https://drafts.csswg.org/css-text-decor-3/#propdef-text-decoration

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/text-decoration

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>

	<style>
		
		p{
		width: 400px;
		margin: 3em;
		}
		
		.span_1{
		text-decoration-line: underline;
		text-decoration-style: dashed;
		text-decoration-color: #0000FF;
		}
		
		.span_2{
		text-decoration-line: overline;
		text-decoration-style: dotted;
		text-decoration-color: orange;
		}		
		
		.span_3{
		text-decoration-line: line-through;
		text-decoration-style: wave;
		text-decoration-color: rgba(255,0,0,0.7);
		}
		
		.span_4{
		text-decoration-line: underline overline;
		text-decoration-style: double;
		text-decoration-color: rgb(0,255,0);
		}
		
		.span_5{
		text-decoration: underline solid hsl(120,100%,50%);
		}		
		
	</style>
	
</head>
<body>

	<p class="p_1">
		
		<span class="span_1">Текст №1</span> <br>
		<span class="span_2">Текст №2</span> <br>		
		<span class="span_3">Текст №3</span> <br>		
		<span class="span_4">Текст №4</span> <br>		
		<span class="span_5">Текст №5</span>	
	
	</p>
	
</body>
</html>

Пример №1