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

text-decoration

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

Текст

Синтаксис

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

.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;
}
<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

<!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зачеркнутый текст

Ссылки