КодSEOБлогИное

Как подчеркнуть текст прямой, пунктирной, волнистой линией или, наоборот, убрать подчёркивание

Курсы HTML, CSS, PHP, JavaScript, лектор Трепачёв Д.П.

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

Стиль ссылки 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 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
наследует значение родителя
наследует значение родителя
Свойство 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
наследует значение родителя
наследует значение родителя
Свойство text-decoration-style не наследуется, применяется ко всем элементам
<style>
div {
  text-decoration-line: underline;
  text-decoration-style: solid;
}
</style>

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

text-decoration-color

что у текста
полностью прозрачный (невидимый)
словом
hex
RGB или RGBA
HSL() или HSLA()
currentcolor
наследует значение родителя
наследует значение родителя
Свойство text-decoration-color не наследуется, применяется ко всем элементам
<style>
div {
  text-decoration-line: underline;
  text-decoration-color: currentcolor;
}
</style>

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

text-decoration-skip

черта ничего не пропускает
черта пропускает пробелы и интервалы, созданные letter-spacing и word-spacing
черта немного не доходит до начала и конца элемента для того, чтобы два рядом стоящих элемента не были подчёркнуты единой линией
черта видна, если задана родителю, и пропускает области, созданные margin, padding и border
наследует значение родителя
Свойство text-decoration-skip не наследуется, применяется ко всем элементам
<style>
div {
  text-decoration: underline;
  text-decoration-skip: solid;
}
</style>

<div>Свойство <code>text-decoration-skip</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.