Как сделать нижнее подчеркивание в css

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

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

text-decoration

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

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

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

border-bottom

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

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

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

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

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

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

a>span

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

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

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

linear-gradient

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

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

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

Заключение

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

text-decoration:

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

border-bottom:

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

a>span:

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

linear-gradient:

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

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

Нижнее подчёркивание html или как украсить свой текст для удобного чтения

Приветствую всех, кто жаждет новых знаний и читает мой блог. Публикацию сегодняшнего дня я хочу посвятить весьма легкой теме, которая тем не менее регулярно вызывает ряд вопросов у новичков: «Как убрать или добавить нижнее подчеркивание html».

Насколько вы уже знаете, само нижнее подчеркивание можно задавать вручную, однако у ссылок они установлены по умолчанию. Именно поэтому в статье я напомню вам, как задавать подчеркивание заголовкам, расскажу, как устанавливать нижнюю линию на всю ширину блока, а также как бороться со стандартным форматированием ссылок. Ну что ж, начнем!

А давай-ка вот этим подчеркнем!

В языке html существуют специальный парный тег для подчеркивания текста: <u>слово</u>.

Однако профессиональные верстальщики пользуются механизмами стилевых каскадных таблиц, т.е. css, для оформления внешнего вида всего сайта. И это правильно. Такой подход разделяет разметку от стилизации, делает форматирование гибким и удобным. К тому же так легче отловить баги (ошибки) в коде.

Для подчеркивания текстового контента в основном используются такие свойства: border и text-decoration.

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

text-decorashion

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

  1. border-right (справа)
  2. border-top (сверху)
  3. border-left (слева)
  4. border-bottom (снизу)
  • точечное (dotted)
  • пунктирное (dashed)
  • линейное (solid)
  • двойное (double)
  • объемное обрамление блокам (groove,inset,ridge иoutset)

Не забывайте, что всегда можно повторить стилевые настройки блока-родителя при помощи ключевого слова inherit.

Теперь обсудим свойство языка css text-decoration. Данный элемент отвечает за дополнительные украшения текста.

К ним относятся:

  1. мигание (blink)
  2. линия над текстом (overline)
  3. зачеркнутые объекты (line-through)
  4. наследование стилизации (inherit)
  5. отмена всех дополнительных декораций (none)
  6. необходимое нам подчеркивание (underline)

Настало время практики

Теперь я хочу, чтоб вы закрепили полученные знания и практически опробовали приведенный мной пример программного кода. Для тех, кто знаком с данной темой, это также будет полезно. Как мы все знаем: «Повторение – мать учения!».

Пример использования подчеркивания

Данный код реализует видоизмененную стилизацию ссылок, а также устанавливает подчеркивание заголовка во всю ширину блока.

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Подчеркивание</title> <style> h1 < text-align:center; border-bottom:3px double green; padding-bottom: 4px; >.block < border: 5px groove green; padding: 40px; font-size:21px; >.one < text-decoration: none; border-bottom: 2px dashed green; color: green; >.two < text-decoration: none; color: green; font-weight: 900; >a.two:hover, a.one:hover < color: blue; ></style> </head> <body> <h1>Озаглавим текст подчеркнутым названием</h1> <div В этом блоке находится важный текст с некоторым описанием чего-то и ссылкой на первый ресурс с пунктирным подчеркиванием. Теперь мы опишем вторую ссылку, убрав стандартное подчеркивание и цвет. </div> </body> </html>

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

Еще интересную статью можете почитать про вертикальные линии, где я подробно рассказал про интересные моменты и некоторые секретные украшательства.

Не забывайте вступать в ряды моих подписчиков, ведь впереди еще множество интересных и полезных тем, а также делитесь ссылкой блога с друзьями. Пока-пока!

Простой способ оформления подчеркивания у однострочных ссылок

В недавнем дайджесте со свежими материалами из мира фронтенда увидел подборку способов подчеркивания в CSS.

Странно, что в такой хорошей подборке не указан простой способ с использованием псевдокласса :after.

Плюсы такого способа:
+ Простота использования;
+ Широкие возможности по настройкам (позиционирование, стиль, толщина, цвет линии);
+ Работает на любом фоне;
+ Не зависит от изменения масштаба (если текст при этом остается однострочным)

Минусы:
— Не подходит для подчеркивания многострочного текста;

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

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