В этой статье мы разберем несколько способов сделать нижнее подчеркивание текста. Два из них — самые популярные, остальные два не так очевидны, но имеют значительное преимущество. Какое? Об этом поговорим ниже. Итак, поехали!

text-decoration

Это самый популярный и, можно сказать, стандартный способ, подчеркнуть текст. Давайте рассмотрим как такое подчеркивание выглядит на практике:

Что нужно сделать?

HTML:

<a href="javascript::">Подчеркнутый текст</a>

CSS:

a {
     text-decoration: underline;
}

border-bottom

Этот метод тоже можно отнести к стандартному. Многие его применяют, когда хотят отделить подчеркивание от текста. Наглядный пример:

Что нужно сделать?

HTML:

<a href="javascript::">Подчеркнутый текст</a>

CSS:

a {
     border-bottom: 1px solid #268ccc;
}

Однако рассмотренные методы имеют 2 минуса:

• в первом случае: подчеркивающая линия находится слишком близко к нужному тексту;
• во втором случае: подчеркивающая линия находится слишком далеко от нужного текста.

Чтобы решить эти проблемы Вы можете воспользоваться двумя оставшимися методами. Применяйте тот, который больше нравится Вам.

a>span

Смысл этого метода в стилизации дочернего элемента span. А это значит, что внутри тега a, необходимо добавит тег span. Давайте посмотрим как это выглядит:

Что нужно сделать?

HTML:

<a href="javascript::">Подчеркнутый текст</a>

CSS:

a {
     font-size: 50%;
     border-bottom: 1px solid #268ccc;
}
a>span {
     font-size: 200%;
     line-height:normal;
}

linear-gradient

Этот метод подразумевает создание линии через градиент и позиционирования его относительно текста. Давайте посмотри как это выглядит на практике:

Стоит заметить, что цвет линии становится не такой яркий, это нужно учесть для дизайна. «Отдалненность» линии от текста возможно регулировать за счет background-position.
Давай рассмотрим как сделать такое подчеркивание:

HTML:

<a href="javascript::">Подчеркнутый текст</a>

CSS:

a {
     background: 0 0;
     background: -moz-linear-gradient(top,rgba(0,0,0,0) 0,#268ccc 100%);
     background: -webkit-linear-gradient(top,rgba(0,0,0,0) 0,#268ccc 100%);
     background: -o-linear-gradient(top,rgba(0,0,0,0) 0,#268ccc 100%);
     background: -ms-linear-gradient(top,rgba(0,0,0,0) 0,#268ccc 100%);
     background: linear-gradient(to bottom,rgba(0,0,0,0) 0,#268ccc 100%);
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=transparent, endColorstr=#268ccc, GradientType=0);
     background-repeat: repeat-x;
     background-position: 0 100%;
     background-size: 1px 1px;
     text-decoration: none;
}

Заключение

В заключение хотелось бы вынести все примеры в один блок, чтобы возможно было понять разницу всех этих методов.

text-decoration:

border-bottom:

a>span:

linear-gradient:

А какой метод подчеркивания текста применяете Вы чаще всего? Например, я чаще всего использую третий способ, однако и четвертый очень сильно помогает, когда по макету требуется сделать линию не такой яркой, как сам текст.