Подчёркнутый текст (свойство text-decoration)

• text-decoration
• text-decoration-line
• text-decoration-style
• text-decoration-color
• text-decoration-skip
• text-decoration-skip-ink
• text-underline-position
• Мигающий текст на CSS
• Тень от текста на CSS
• Градиент текста на CSS
• Обводка текста на CSS

Отменить подчёркивание у ссылки

Стиль ссылки CSS

<style>
.raz {
  text-decoration: none;
  border: none; /* только если ранее подчеркивание было сделано с помощью border */ 
}
</style>

<a href="http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html#stil" class="raz">Стиль ссылки CSS</a>

Часто применяется при создании ссылок в виде кнопок или в виде пунктов меню, поскольку текстовые ссылки в браузерах подчёркиваются по умолчанию (выделение только цветом создаёт неудобство дальтоникам).

Ссылка подчёркивается при наведении

Стиль ссылки CSS

<style>
.raz:not(:hover) {
  text-decoration: none;
}
</style>

<a href="http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html#stil" class="raz">Стиль ссылки CSS</a>

Пунктирное подчёркивание

Стиль текста CSS

<style>
.raz {
  text-decoration: underline; /* нижнее подчёркивание сплошной чертой для всех браузеров */ 
  text-decoration-style: dashed; /* сплошную линию заменить на пунктир (нет поддержки в IE) */ 
  cursor: pointer; /* изменить курсор мышки */ 
}
</style>

<span class="raz">Стиль текста CSS</span>

text-decoration

none underline overline line-through spelling-error grammar-error solid double dotted dashed wavy

initial

none solid currentcolor

inherit

наследует значение родителя

unset

none solid currentcolor

Свойство text-decoration не наследуется, применяется ко всем элементам

<style>
div {
  text-decoration: none;

  /* или */ 

  text-decoration-line: none;
  text-decoration-style: solid;
  text-decoration-color: currentColor;
}
</style>

<div>Свойство <code>text-decoration</code> не наследуется, применяется ко всем элементам</div>

text-decoration-line

none

убрать от текста линии

underline

подчеркнуть текст (снизу)

overline

провести линию над текстом (сверху)

line-through

зачеркнуть текст (посередине)

spelling-error

оформить как при орфографической ошибке (не поддерживается браузерами)

grammar-error

оформить как при грамматической ошибке (не поддерживается браузерами)

initial

none

inherit

наследует значение родителя

unset

none

Свойство text-decoration-line не наследуется, применяется ко всем элементам

<style>
div {
  text-decoration-line: none;
}
</style>

<div>Свойство <code>text-decoration-line</code> не наследуется, применяется ко всем элементам</div>

Сделать линию над и под текстом

Стиль текста CSS

<style>
.raz {
  text-decoration-line: underline overline;
}
</style>

<span class="raz">Стиль текста CSS</span>

text-decoration-style

solid

одинарная прямая линия

double

двойная прямая линия

dotted

линия точками

dashed

прерывистая пунктирная линия

wavy

волнистая линия

initial

solid

inherit

наследует значение родителя

unset

solid

Свойство text-decoration-style не наследуется, применяется ко всем элементам

<style>
div {
  text-decoration: underline;
  text-decoration-style: solid;
}
</style>

<div>Свойство <code>text-decoration-style</code> не наследуется, применяется ко всем элементам</div>

text-decoration-color

currentcolor

цвет черты что у текста

transparent

черта полностью прозрачная (невидимая)

red

цвет черты ключевым словом

#ff0000 или #ff0000ff

цвет черты в формате HEX

rgb(255,0,0) или rgba(255,0,0,1)

цвет черты в формате RGB или RGBA

hsl(0,100%,50%) или hsla(0,100%,50%,1)

цвет черты в формате HSL() или HSLA()

initial

currentcolor

inherit

наследует значение родителя

unset

currentcolor

Свойство text-decoration-color не наследуется, применяется ко всем элементам

<style>
div {
  text-decoration: underline;
  text-decoration-color: currentcolor;
}
</style>

<div>Свойство <code>text-decoration-color</code> не наследуется, применяется ко всем элементам</div>

ВНИМАНИЕ! Нижестоящие свойства имеют плохую поддержку браузерами. Свойства text-underline-offset и text-decoration-width не реализованы вовсе и потому пока не рассмотрены в статье.

text-decoration-skip

objects

черта пропускает картинки и inline-block-элементы

none

черта ничего не пропускает

spaces

черта пропускает пробелы и интервалы, созданные letter-spacing и word-spacing

leading-spaces

trailing-spaces

edges

черта немного не доходит до начала и конца элемента для того, чтобы два рядом стоящих элемента не были подчёркнуты единой линией

box-decoration

черта видна, если задана родителю, и пропускает области, созданные margin, padding и border

initial

objects leading-spaces trailing-spaces

inherit

наследует значение родителя

unset

наследует значение родителя

Свойство text-decoration-skip наследуется, применяется ко всем элементам .

<style>
div {
  text-decoration: underline;
  text-decoration-skip: objects leading-spaces trailing-spaces;
}
code {
  display: inline-block;
}
</style>

<div>Свойство <code>text-decoration-skip</code> наследуется, применяется ко всем элементам <img src="http://photos1.blogger.com/x/blogger2/6533/16720282190093/320/140728/plain.gif" alt="смайлик" width="32" height="32">.</div>

text-decoration-skip-ink

auto

черта пропускает выступающие части символов (например, "хвостики" у букв «р» и «у»)

none

черта не пропускает выступающие части символов (например, "хвостики" у букв «р» и «у»)

initial

auto

inherit

наследует значение родителя

unset

наследует значение родителя

Свойство text-decoration-skip-ink наследуется, применяется ко всем элементам

<style>
div {
  text-decoration: underline;
  text-decoration-skip-ink: auto;
}
</style>

<div>Свойство <code>text-decoration-skip-ink</code> наследуется, применяется ко всем элементам</div>

Пропуск выносных частей символов в подчеркиваемом тексте в Google Chrome

Пример подчёркнутого текста

<style>
.raz {
  text-decoration: underline;
  text-decoration-skip: ink;
}
</style>

<span class="raz">Пример подчёркнутого текста</span>

Подчёркивание без пропусков выносных частей символов в Safari

Пример подчёркнутого текста

<style>
.raz {
  text-decoration: underline;
  -webkit-text-decoration-skip: none;
}
</style>

<span class="raz">Пример подчёркнутого текста</span>

text-underline-position

auto

автоматически (положение черты близко к базовой линии)

under

черта достаточно отдалена от базовой линии, чтобы не пересекать выступающие части символов

left

right

initial

auto

inherit

наследует значение родителя

unset

наследует значение родителя

Свойство text-underline-position наследуется (применяется ко всем элементам)

<style>
div {
  text-decoration: underline;
  text-underline-position: auto;
}
</style>

<div>Свойство <code>text-underline-position</code> наследуется (применяется ко всем элементам)</div>

Разница text-decoration и border

Нижнее подчёркивание, сделанное text-decoration: underline;

Нижнее подчёркивание, сделанное border-bottom: 1px solid;

<table>
  <tr>
    <td style="text-decoration: underline;">Нижнее подчёркивание, сделанное <code>text-decoration: underline;</code>
    <td><span style="border-bottom: 1px solid;">Нижнее подчёркивание, сделанное <code>border-bottom: 1px solid;</code></span>
</table>

Свойство text-decoration подходит лучше для подчёркивания многострочного текста (при уменьшении экрана длинное слово также переходит на следующую строку при отзывчивой вёрстке). Свойство border активно использовали, когда не поддерживались свойства text-decoration-line, text-decoration-style и text-decoration-color.