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

text-decoration — CSS-свойство сокращённой записи, которое задаёт внешний вид декоративных линий текста. Это сокращённая запись свойств text-decoration-line, text-decoration-color, text-decoration-style и более нового свойства text-decoration-thickness.

Текстовые декорации отображаются поверх текста дочерних элементов. Это означает, что если для элемента задана текстовая декорация, дочерний элемент не может её убрать. Например, в разметке <p>This text has <em>some emphasized words</em> in it.</p> правило стиля p { text-decoration: underline; } подчёркивает весь абзац. Правило стиля em { text-decoration: none; } ничего не изменит: весь абзац по-прежнему будет подчёркнут. Однако правило em { text-decoration: overline; } добавит ещё одну декорацию к фразе «некоторых выделенных слов».

Попробуйте

text-decoration: underline;

text-decoration: underline dotted;

text-decoration: underline dotted red;

text-decoration: green wavy underline;

text-decoration: underline overline #ff3028;

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

Составные свойства

Это свойство является сокращённой записью следующих свойств CSS:

• text-decoration-color
• text-decoration-line
• text-decoration-style
• text-decoration-thickness

Синтаксис

text-decoration: underline;
text-decoration: overline red;
text-decoration: none;

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

Свойство text-decoration задаётся одним или несколькими значениями, разделёнными пробелами и представляющими различные свойства text-decoration с полными именами.

Значения

text-decoration-line

Задаёт тип используемой декорации, например underline или line-through.

text-decoration-color

Задаёт цвет декорации.

text-decoration-style

Задаёт стиль линии декорации, например solid, wavy или dashed.

text-decoration-thickness

Задаёт толщину линии декорации.

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

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

text-decoration = 
  <'text-decoration-line'> ||
  <'text-decoration-style'> ||
  <'text-decoration-color'> ||
  <'text-decoration-thickness'>

Примеры

Демонстрация значений text-decoration

.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: text-decoration-line, text-decoration-color, text-decoration-style и text-decoration-thickness.
• Свойства text-decoration-skip-ink, text-underline-offset и text-underline-position также влияют на text-decoration, но не входят в сокращённую запись.
• Свойство list-style управляет внешним видом элементов в HTML-списках <ol> и <ul>.
• Атрибут SVG text-decoration