CSS-свойство `text-decoration-line`

CSS-свойство text-decoration-line задаёт тип оформления текста в элементе, например подчёркивание или надчёркивание.

Если нужно одновременно задать несколько свойств оформления текста, удобнее воспользоваться сокращённым свойством text-decoration.

Попробуйте

text-decoration-line: none;

text-decoration-line: underline;

text-decoration-line: overline;

text-decoration-line: line-through;

text-decoration-line: grammar-error;

text-decoration-line: spelling-error;

text-decoration-line: underline overline;

text-decoration-line: underline line-through;

<section id="default-example">
  <p>
    I'd far rather be
    <span class="transition-all" id="example-element">happy than right</span>
    any day.
  </p>
</section>

p {
  font: 1.5em sans-serif;
}

Синтаксис

/* Single keyword */
text-decoration-line: none;
text-decoration-line: underline;
text-decoration-line: overline;
text-decoration-line: line-through;
text-decoration-line: blink;
text-decoration-line: spelling-error;
text-decoration-line: grammar-error;

/* Multiple keywords */
text-decoration-line: underline overline; /* Two decoration lines */
text-decoration-line: overline underline line-through; /* Multiple decoration lines */

/* Global values */
text-decoration-line: inherit;
text-decoration-line: initial;
text-decoration-line: revert;
text-decoration-line: revert-layer;
text-decoration-line: unset;

Значения

Это свойство задаётся либо значением none, либо списком ключевых слов, разделённых пробелами и выбранных из приведённого ниже списка:

none

Не создаёт оформление текста.

underline

Под каждой строкой текста проходит декоративная линия.

overline

Над каждой строкой текста проходит декоративная линия.

line-through

Через середину каждой строки текста проходит декоративная линия.

blink

Текст мигает (попеременно становится видимым и невидимым). Соответствующие стандартам пользовательские агенты могут не мигать текстом. Это значение устарело; вместо него следует использовать CSS-анимации.

spelling-error

Для каждой строки текста используется способ пользовательского агента выделять орфографические ошибки. В большинстве браузеров это красная пунктирная линия.

grammar-error

Для каждой строки текста используется способ пользовательского агента выделять грамматические ошибки. В большинстве браузеров это зелёная пунктирная линия.

Формальное определение

Формальный синтаксис

text-decoration-line = 
  none |
  [ underline || overline || line-through || blink ] |
  spelling-error |
  grammar-error

Примеры

Базовый пример

<p class="wavy">Here's some text with wavy red underline!</p>
<p class="both">This text has lines both above and below it.</p>

.wavy {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: red;
}

.both {
  text-decoration-line: underline overline;
}

Пример с ошибками

В этом примере в первом абзаце есть орфографическая ошибка, и к слову с ошибкой применяется оформление браузера для орфографических ошибок. Во втором абзаце применяется оформление браузера для грамматических ошибок. В браузерах, не поддерживающих эти значения text-decoration-line, оформление не изменится.

<p>This text contains a <span class="spelling">speling</span> mistake.</p>
<p class="grammar">This text contain grammatical errors.</p>

.spelling {
  text-decoration-line: spelling-error;
}

.grammar {
  text-decoration-line: grammar-error;
}

Спецификации

Совместимость с браузерами

См. также

• Если нужно одновременно задать несколько свойств оформления текста, удобнее воспользоваться сокращённым свойством text-decoration, которое также включает:
  • text-decoration-style
  • text-decoration-color
  • text-decoration-thickness
• text-underline-offset
• ::spelling-error
• ::grammar-error