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

Обновлено: 04.07.2024

Рассмотрим все способы как можно сделать подчеркнутый текст через html и CSS. Всего существует три варианта:

Название пришло от английского слова "underline". Html тег считается более новым.

Преобразуется на странице в

Обычный текст. Подчеркнутый текст через тег u

Подчеркнутый текст через свойство CSS text-decoration

В CSS есть свойство text-decoration , которое отвечает за форматирование текста html для создания подчеркивания.

Синтаксис CSS text-decoration

none — текст без оформления
underline — нижнее подчеркивание
overline — верхнее подчеркивание
line-through — зачеркивание текста
blink — мерцающий текст (рекомендуется не применять это значение)

Нас интересует значение underline

Преобразуется на странице в

Можно также задавать стиль линии и цвет. Более подробно про эту возможность читайте в статье: CSS text-decoration

Подчеркнутый текст через свойство CSS border-bottom

Свойство CSS border-bottom создано для создании рамок (границ) объекта снизу. Естественно таким образом можно задавать и подчеркивание тексту.

Преобразуется на странице в

Текст со свойством border-bottom (красное подчеркивание)
Текст со свойством border-bottom (пунктирное подчеркивание)

Свойство text-decoration позволяет добавить декоративные линии тексту. Текст можно подчеркнуть, перечеркнуть или добавить линию над текстом.

text-decoration: underline часто встречается при работе со ссылками.

Пример

Создадим четыре абзаца текста. По одному для каждого из доступных значений свойства text-decoration .

Как это понять

По факту свойство text-decoration является шорткатом и позволяет указать значения для свойств:

— положение декоративной линии; — стиль декоративной линии; — цвет декоративной линии.

Но, как правило, его используют только для указания положения линии.

Как пишется

Положение линии

Пишем свойство text-decoration и после двоеточия указываем одно из доступных значений:

underline — подчёркнутый текст.
line-through — перечёркнутый текст.
overline — надчёркнутый текст, линия находится над словами.
none — отменяет все эффекты.

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

Стиль линии

Не многие знают, что после ключевого слова, означающего положение линии, можно указать ещё и стиль этой линии и её цвет.

Для управления стилем линии используются следующие ключевые слова:

solid — сплошная линия. Значение по умолчанию.
double — двойная линия.
dotted — точечная линия.
dashed — пунктирная линия.
wavy — волнистая линия.

Управлять стилем подчёркивания обычно не требуется, но об этой возможности знать нужно.

Как будет выглядеть двойное перечёркивание:

Стиль линии можно указать отдельно при помощи свойства text-decoration-style .

Цвет линии

Цвет линии по умолчанию совпадает с цветом текста, для которого задаётся свойство text-decoration .

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

Например, сделаем двойное подчёркивание красного цвета:

Цветом линии можно управлять отдельно при помощи свойства text-decoration-color :

Подсказки

💡 Свойство не наследуется.

💡 Значение по умолчанию для обычного текста — none . Но для ссылок ( ) значение по умолчанию — underline .

💡 Свойство text-decoration целиком нельзя анимировать при помощи свойства transition 😒

Но можно анимировать цвет линии!

Пусть по умолчанию цвет линий будет совпадать с цветом текста, а по наведению курсора цвет будет меняться на другой за 0.3 секунды.

💡 Нельзя управлять толщиной и точным положением линии, заданной при помощи text-decoration .

💡 Если по дизайну требуется задать тексту или ссылке подчёркивание, отличающееся от стандартного по толщине или положению, а также если нужно анимировать появление / пропадание линии, то используй псевдоэлементы ::before или ::after .

На практике

Егор Левченко

🛠 Иногда вам может потребоваться управлять расстоянием между текстом и линией ниже. Обычно это делается, через свойство line-height . Чем больше высота строки, тем ниже будет полоса подчёркивания.

К сожалению, этот способ подходит не всегда. Например, когда дизайнер задумал элемент несколько иначе. На примере ниже отказываемся от text-decoration и используем border-bottom .

Алёна Батицкая

🛠 У ссылок по умолчанию задано подчёркивание. Если по дизайну оно не требуется, то нужно будет его сбросить — задать свойство text-decoration: none . Это самый частый случай применения этого свойства. Перечёркивание или надчёркивание почти не встречаются в работе.

🛠 Отдельные свойства — text-decoration-line , text-decoration-style и text-decoration-color — редко встречаются в вёрстке, но знать о них нужно, чтобы при необходимости не переписывать свойство целиком только для изменения стиля или цвета линии.

Как добавить подчеркивание ссылки, как убрать подчеркивание ссылки, подчеркнуть ссылку через css? добавить подчеркивание с помощью css, изменить цвет подчеркивания ссылки! В общем все, что касается подчеркивания ссылок , как с подчеркиванием работать, стили по умолчанию и т.д.

Первое, что мы теперь делаем, это делаем список всех подпунктов, касающихся нашей темы подчеркивание ссылки! Это, как мне кажется намного стало удобнее и процент ухода пользователя, сократился до не бывалых малых величин!

В общем погнали!

Все о добавлении и удалении подчеркивания ссылки:

Подчеркивание ссылки по умолчанию

Поскольку наша ссылка не имеет исходного состояния, нам придется вывести стили ссылки с подчеркиванием по умолчанию! Мы делали пример страницы с цветами ссылки , там же можно посмотреть и подчеркивание ссылки по умолчанию!

Мы сделаем отдельный класс чтобы увидеть это подчеркивание по умолчанию прямо на даннйо странице!

Здесь мы видим, что есть некое свойство text-decoration , которое имеет значение underline - если вы изучали английский(и тут сразу про себя: вот же дурень! Нужно было учить английский в школе!)
Поскольку я учился и на "инфаке", то мне и задумываться не нужно. перевод: декорирование текста : подчеркивание. , но и если разложить слово under и + line переводится - под линией

Ну и плюс. вообще не красивое подчеркивание, каждая буква, которая имеет выступ за линию, разрывает подчеркивание! Это например буква у

Следующим пунктом уберем подчеркивание у ссылки!

Убрать подчеркивание ссылки css

Как мы уже выше обращали ваше внимание на свойство text-decoration. Чтобы убрать подчеркивание снизу, надо изменить значение text-decoration и поставить none

И добавим такой этот класс нашей ссылке

Результат удаления подчеркивания у ссылки через css

Чтобы это правило распространялось на все ссылки на сайте нужно написать просто без класса

Если нужно чтобы подчеркивание убиралось в определенном блоке, то выбираем блок, например этот блок, в котором написаны данные строки, имеет ид id="main_text"

При наведении на ссылку - убрать подчеркивание

Но мы хоти удалить подчеркивание не на всегда, а лишь тогда, когда мышка будет сверху ссылки! Как убрать подчеркивание при наведении на ссылку!

Давайте это сделаем! Нам понадобится псевдо класс :hover

Чтобы нам продемонстрировать убирание ссылки при наведении нам понадобится новая ссылка и новый класс

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

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

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

text-decoration

text-decoration-line

none убрать от текста линии underline подчеркнуть текст (снизу) overline провести линию над текстом (сверху) line-through зачеркнуть текст (посередине) spelling-error оформить как при орфографической ошибке (не поддерживается браузерами) grammar-error оформить как при грамматической ошибке (не поддерживается браузерами) initial none inherit наследует значение родителя unset none

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

text-decoration-style

solid одинарная прямая линия double двойная прямая линия dotted линия точками dashed прерывистая пунктирная линия wavy волнистая линия initial solid inherit наследует значение родителя unset solid

text-decoration-color

ВНИМАНИЕ! Нижестоящие свойства имеют плохую поддержку браузерами. Свойства 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-ink

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

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

text-underline-position

auto автоматически (положение черты близко к базовой линии) under черта достаточно отдалена от базовой линии, чтобы не пересекать выступающие части символов left right initial auto inherit наследует значение родителя unset наследует значение родителя

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

Свойство text-decoration подходит лучше для подчёркивания многострочного текста (при уменьшении экрана длинное слово также переходит на следующую строку при отзывчивой вёрстке). Свойство border активно использовали, когда не поддерживались свойства text-decoration-line , text-decoration-style и text-decoration-color .

Fedor Timofeev Я видел еще интересное решение при подчеркивании ссылки. При наведении курсора линия подчеркивания появлялась и от середины слова/фразы начинала как бы убегать налево и направо в пределах ссылки, образуя подчеркивание. Вы можете такое реализовать? Здесь не буду пиарить сторонний ресурс. Кто хочет посмотреть пишите. Здесь особенно понравилось волнистое подчеркивание. Однозначно буду применять. А то уже почти решил отказаться от Вашей рассылки. NMitra Нижнее подчёркивание, сделанное с помощью background для inline-элемента Для блочного или inline-block-элемента лучше делать областью с помощью border

Читайте также: