CSS :: Свойство text-decoration-line
http://belarusweb.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 – используется в качестве значения по умолчанию, отменяет все эффекты, включая подчеркивание у ссылок, что бывает очень полезно при формировании меню.

Ссылки

Примеры

HTML Результат BwCodes
<!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