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

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

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

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

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

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

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

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

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

<style>
div {
  text-decoration: none;

  /* или */ 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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