Веб-разработка

4 способа сделать нижнее подчеркивание для ссылок

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

text-decoration

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

Подчеркнутый текст и дополнительные содержание

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

HTML:

CSS:

border-bottom

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

Подчеркнутый текст и дополнительные содержание

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

HTML:

CSS:

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

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

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

a>span

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

Подчеркнутый текст и дополнительные содержание

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

HTML:

CSS:

linear-gradient

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

Подчеркнутый текст и дополнительные содержание

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

HTML:

CSS:

Заключение

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

text-decoration:

Подчеркнутый текст и дополнительные содержание

border-bottom:

Подчеркнутый текст и дополнительные содержание

a>span:

Подчеркнутый текст и дополнительные содержание

linear-gradient:

Подчеркнутый текст и дополнительные содержание

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

Предыдущий пост

Азы работы в Illustrator для верстальщиков (часть 1)

Следующий пост

С чего начать изучение и использование SASS/SCSS? Пошаговая инструкция

Комментарии

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *