Перейти к содержанию

text-decoration

Сокращенное свойство text-decoration устанавливает внешний вид декоративных линий в тексте. Это сокращение для text-decoration-line, text-decoration-color, text-decoration-style и text-decoration-thickness.

Демо

Текст

Синтаксис

1
2
3
4
5
6
7
text-decoration: none;
text-decoration: underline red;
text-decoration: underline wavy red;

text-decoration: inherit;
text-decoration: initial;
text-decoration: unset;

Определение
Начальное значение как каждое их свойств сокращения:
text-decoration-color: currentcolor
text-decoration-style: solid
text-decoration-line: none
Применяется ко всем элементам и псевдо-элементам ::first-letter и ::first-line
Наследуется нет
Вычисленное значение как каждое их свойств сокращения:
text-decoration-line: как определено
text-decoration-style: как определено
text-decoration-color: вычисленный цвет
text-decoration-thickness: как определено
Тип анимации как каждое их свойств сокращения:
text-decoration-color: цвет
text-decoration-style: дискретный
text-decoration-line: дискретный
text-decoration-thickness: вычисленное значение типа

Поддержка браузерами

Примеры

Пример 1

Пример 2

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
.under {
  text-decoration: underline red;
}

.over {
  text-decoration: wavy overline lime;
}

.line {
  text-decoration: line-through;
}

.plain {
  text-decoration: none;
}

.underover {
  text-decoration: dashed underline overline;
}

.thick {
  text-decoration: solid underline purple 4px;
}

.blink {
  text-decoration: blink;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
<p class="under">This text has a line underneath it.</p>
<p class="over">This text has a line over it.</p>
<p class="line">This text has a line going through it.</p>
<p>
  This
  <a class="plain" href="#">link will not be underlined</a>,
  as links generally are by default. Be careful when
  removing the text decoration on anchors since users often
  depend on the underline to denote hyperlinks.
</p>
<p class="underover">
  This text has lines above <em>and</em> below it.
</p>
<p class="thick">
  This text has a really thick purple underline in
  supporting browsers.
</p>
<p class="blink">
  This text might blink for you, depending on the browser
  you use.
</p>

text-decoration

Пример 3

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>text-decoration</title>
        <style>
            a {
                /* Убираем подчеркивание у ссылок */
                text-decoration: none;
            }
            a:hover {
                /* Добавляем подчёркивание 
        при наведении курсора мыши на ссылку */
                text-decoration: underline;
            }
        </style>
    </head>
    <body>
        <p>
            <a href="page/1.html"
                >Стратегическое нападение</a
            >
        </p>
    </body>
</html>

См. также

  • Элемент a — текст ссылки
  • Элемент u — подчеркнутый текст
  • Элемент s — зачеркнутый текст

Ссылки

Комментарии