Как сделать подчеркивание в css
Рассмотрим все способы как можно сделать подчеркнутый текст через html и CSS. Всего существует три варианта:
-
Через html тег и становится подчеркнутым.
Название пришло от английского слова "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
Читайте также: