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

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

text-decoration-color

цвет черты что у текста
черта полностью прозрачная (невидимая)
цвет черты ключевым словом
цвет черты в формате HEX
цвет черты в формате RGB или RGBA
цвет черты в формате HSL() или HSLA()
currentcolor
наследует значение родителя
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

черта пропускает картинки и inline-block-элементы
черта ничего не пропускает
черта пропускает пробелы и интервалы, созданные letter-spacing и word-spacing
черта немного не доходит до начала и конца элемента для того, чтобы два рядом стоящих элемента не были подчёркнуты единой линией
черта видна, если задана родителю, и пропускает области, созданные margin, padding и border
objects leading-spaces trailing-spaces
наследует значение родителя
наследует значение родителя
Свойство 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
наследует значение родителя
наследует значение родителя
Свойство 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
наследует значение родителя
наследует значение родителя
Свойство 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.

Fedor TimofeevЯ видел еще интересное решение при подчеркивании ссылки. При наведении курсора линия подчеркивания появлялась и от середины слова/фразы начинала как бы убегать налево и направо в пределах ссылки, образуя подчеркивание. Вы можете такое реализовать? Здесь не буду пиарить сторонний ресурс. Кто хочет посмотреть пишите. Здесь особенно понравилось волнистое подчеркивание. Однозначно буду применять. А то уже почти решил отказаться от Вашей рассылки. NMitraНижнее подчёркивание, сделанное с помощью background для inline-элемента
<style>
.raz {
  background: linear-gradient(to top, currentcolor, transparent 1px) no-repeat bottom center / 0 auto content-box;
  text-decoration: none;
  transition: background-size 1s;
}
.raz:hover {
  background-size: 100% auto;
}
</style>

Нижнее подчёркивание, сделанное с помощью <a href="http://shpargalkablog.ru/2011/08/fon-dlya-saita-html.html" class="raz"><code>background</code></a> для inline-элемента
Для блочного или inline-block-элемента лучше делать областью с помощью border
<style>
.raz {
  display: inline-block;  /* для длинных ссылок, которые размещаются на нескольких строчках */
  position: relative;
  margin: 3px; /* отступ от ссылки, особенно актуально для адаптированных под сенсорные устройства сайтов, где нажать по коротким рядомстоящим ссылкам проблематично */
  padding: 3px;
  padding: 3px;
  text-decoration: none;
}
.raz:active { /* вид активной ссылки */
  background: #ccc;
  color: #fff;
}
.raz::after,
.raz::before { /* появляющаяся при наведении рамка */
  content: "";
  position: absolute; /* выравнять по центру  */
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
  margin: auto;
  border-style: solid;
  border-color: #808991;
}
.raz::before {
  height: 0;
  border-width: 0 1px;
}
.raz::after {
  width: 0;
  border-width: 1px 0;
}
.raz:hover::before {
  height: 100%;
  transition: .7s;
}
.raz:hover::after {
  width: 100%;
  transition: .7s;
}
</style>

Для блочного или inline-block-элемента лучше делать областью с помощью <a href="http://shpargalkablog.ru/2013/12/border.html" class="raz"><code>border</code></a>
Все комментарии