Как сделать линию под заголовком css
Как сделать подчеркивание ссылок или текста через CSS? Нередко на сайтах используют ссылки без подчеркивания. И только при наведении курсора мыши на ссылку, подчеркивание появляется.
Рассмотрим два способа подчеркивания.
Способ №1: свойство text-decoration
У свойства text-decoration есть разные значения: подчеркивание, перечеркивание, линия над текстом и мигание.
Нас интересует простое подчеркивание, которое задаётся добавлением в css-файл следующего кода:
Добавим в html-файл следующий код:
Посмотрите результат, попробуйте внести изменения при переходе в песочницу:
Способ №2: использование свойства border-bottom
Теперь давайте сделаем наоборот: по умолчанию ссылка подчёркнута, а при наведении курсора мыши — пропадает.
Свойство border-bottom позволяет одновременно установить толщину, стиль и цвет границы внизу элемента, что добавляет сразу несколько преимуществ.
Код HTML-файла:
Добавим в CSS-файл следующий код:
Код для оформления (стиль body) добавляю в песочнице, а здесь оставила лишь тот, что касается ссылок.
Смотрим результат в песочнице:
Старайтесь не копировать весь код, а писать его самостоятельно, так вы оттачиваете до автоматизма свои навыки.
Свойство 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 ;
- border-bottom ;
- box-shadow ;
- background-image ;
- Фильтры SVG ;
- Underline.js (canvas) ;
- text-decoration-* .
Давайте рассмотрим их один за другим и поговорим об их плюсах и минусах.
text-decoration
text-decoration CSS — это самый простой способ подчеркивания в CSS. Применяется всего одно свойство и на этом все. Для небольших размеров шрифта это может выглядеть довольно прилично, но увеличьте размер и та же линия начинает выглядеть неуклюже.
Самая большая проблема применения text-decoration — отсутствие настраиваемости. Свойство соответствует любому размеру шрифта или цвету текста, к которому оно применено, и не существует кроссбраузерного способа изменить заданный стиль.
- Его просто применять;
- Располагается ниже базовой линии;
- По умолчанию добавляет отступы от частей букв, выступающих ниже базовой линии ( в Safari и iOS );
- Переносится по строкам;
- Подходит для любого фона;
- Не добавляет отступы от частей букв, выступающих ниже базовой линии, в других браузерах;
- Нельзя изменить цвет, толщину или стиль линии подчеркивания.
border-bottom
border-bottom — отличается простотой использования и настраиваемостью. Свойство позволяет довольно просто изменять цвет, толщину и стиль линии подчеркивания текста CSS .
Результат применения border-bottom к строчным элементам:
Обратите внимание, что линия подчеркивания размещается под частями букв, выступающими ниже базовой линии. Это можно изменить, задав для элемента свойство inline-block и уменьшив значение line-height . Но в этом случае вы теряете возможность переносить текст. Подходит для однострочного текста.
Можно использовать свойство text-shadow , чтобы скрыть часть линии подчеркивания, выступающей ниже базовой линии. При этом необходимо использовать цвет фона. Данный подход работает только со сплошными цветами фона, но не с градиентной заливкой или изображениями.
Чтобы задать одно подчеркивание, нужно применить четыре свойства стилей. Это больше, чем для text-decoration .
- С помощью text-shadow можно задать отступы от частей букв, выступающих ниже базовой линии;
- Можно изменить цвет, толщину и стиль линии CSS подчеркивания;
- Можно задать переходы и анимацию для цвета и толщины линии подчеркивания;
- Переносится по умолчанию, если это не inline-block ;
- Работает на любом фоне, если не используется text-shadow .
- Размещается далеко от текста, это положение трудно изменить;
- Нужно использовать много дополнительных свойств;
- Странное выделение текста при использовании свойства text-shadow .
box-shadow
Это свойство формирует подчеркивание с помощью двух теней: одна создает прямоугольник, вторая — скрывает большую его часть, кроме нижней. Данный метод применим только для однотонного фона.
Можно использовать тот же самый трюк, что и с text-shadow , чтобы имитировать отступы от частей букв, выступающих ниже базовой линии. Если линия подчеркивания должна отличаться по цвету от текста, то у вас не возникнет таких проблем, как в случае с text-decoration .
- Нижнее подчеркивание CSS может быть размещено ниже базовой линии;
- С помощью text-shadow можно задать отступы ниже базовой линии;
- Можно изменить цвет и толщину линии подчеркивания;
- Подчеркивание переносится построчно.
- Невозможно изменить стиль;
- Не работает для любого фона.
background-image
background-image дает результат, подходящий под все перечисленные критерии. При этом используются linear-gradient и background-position, чтобы создать изображение, которое повторяется по горизонтали вдоль строк текста. При этом для текста должно быть задано display: inline;.
Вместо linear-gradient можно добавить собственное изображение с какими-нибудь эффектами.
- Подчеркивание ссылки CSS может быть размещено ниже базовой линии;
- С помощью text-shadow можно задать отступы ниже базовой линии;
- Можно изменять цвет, толщину и стиль подчеркивания;
- Работает с пользовательскими изображениями;
- Подчеркивание переносится построчно;
- Работает на любом фоне, если не используется text-shadow .
- Размер изображения может изменяться по-разному в зависимости от разрешения, браузера и масштаба просмотра.
Фильтры SVG
Можно создать SVG элемент filter , который рисует линию, а затем расширяет текст, чтобы скрыть прозрачные части линии. После этого нужно задать для фильтра идентификатор и сослаться на него в CSS :
Преимущество этого подхода заключается в том, что фильтр добавляет прозрачность, не используя text-shadow . Можно задать промежутки линии CSS подчеркивания выступающими ниже базовой на любом фоне. Но этот метод не применим для однострочного текста, в этом его основной недостаток.
Вот как это выглядит в Chrome и Firefox :
Поддержка браузерами IE , Edge , и Safari является проблематичной. Проверить наличие поддержки SVG-фильтра в CSS трудно.
- Может быть размещено ниже базовой линии;
- Можно задать отступы ниже базовой линии;
- Можно изменять цвет, толщину и стиль линии подчеркивания;
- Работает на любом фоне.
- Подчеркивание не переносится на несколько строк;
- Не работает в IE , Edge или Safari , но можно создать резервный вариант с помощью text-decoration . В Safari оно будет выглядеть хорошо в любом случае.
Underline.js (canvas)
Underline.js рисует CSS подчеркивание с помощью элементов . Это новый подход, который работает на удивление хорошо.
Это только техническая демо-версия, поэтому для использования библиотеки придется осуществить глобальные изменения в разрабатываемом проекте.
Мы приводим данный метод для демонстрации возможностей при создании красивых, интерактивных подчеркиваний.
Свойства text-decoration-*
Это свойство прекрасно работает само по себе, но можно добавить несколько экспериментальных свойств для настройки внешнего вида:
- text-decoration-color ;
- text-decoration-skip ;
- text-decoration-style .
Только не радуйтесь раньше времени. Помните о проблеме поддержки браузерами.
TEXT-DECORATION-COLOR
Позволяет изменить цвет CSS подчеркивания пунктиром отдельно от цвета текста. Данное свойство хорошо поддерживается браузерами. Оно работает в Firefox и с помощью префикса в Safari . Но если не обрабатывать разрывы ниже базовой линии текста, то Safari поместит подчеркивание поверх текста.
TEXT-DECORATION-SKIP
Это свойство добавляет разрывы ниже базовой линии:
Оно не является стандартным и на данный момент работает только в Safari, поэтому для его применения нужно использовать префикс -webkit. Safari поддерживает это свойство по умолчанию, поэтому разрывы добавляются даже на тех сайтах, где свойство не указано вообще.
TEXT-DECORATION-STYLE
Данное свойство предлагает те же типы подчеркивания текста CSS , которые можно задать с помощью border-style . И кроме этого добавляет тип линии wavy ( волнистая ).
Ниже приводятся различные значения, которые можно использовать:
- dashed ;
- dotted ;
- double ;
- solid ;
- wavy .
На данный момент text-decoration-style работает только в Firefox , вот скриншот:
Выглядит знакомо, не правда ли?
В чем недостатки?
Свойства text-decoration-* являются гораздо более интуитивными, чем большинство других способов. Но они не позволяют указать толщину линии и положение.
После небольшого исследования я нашел эти два свойства:
- text-underline-width ;
- text-underline-position .
Похоже, они рассматривались в более ранних версиях CSS , но так и не были реализованы из-за отсутствия интереса.
Вывод
Для CSS подчеркивания небольшого текста я рекомендую использовать text-decoration , а затем применить text-decoration-skip . Это выглядит не слишком изящно в большинстве браузеров, но зато будет работать. Плюс всегда есть шанс, что поддержка этих свойств будет реализована в большинстве браузеров.
Для большего текста стоит использовать подход фонового изображения. Он работает. Кроме этого, существуют примеси Sass , которые можно использовать вместе с ним. Можно одновременно не использовать text-shadow, если линия подчеркивания достаточно тонкая или отличается от текста по цвету.
Для одиночных строк текста используйте border-bottom и любые другие свойства.
Для добавления разрывов ниже базовой линии текста на градиентных фонах или фоновых изображениях попробуйте использовать SVG-фильтры . А когда поддержка браузерами существенно улучшится, можно будет добиться нужного эффекта с помощью свойств text-decoration-* .
Пожалуйста, опубликуйте ваши мнения по текущей теме материала. Мы очень благодарим вас за ваши комментарии, лайки, дизлайки, подписки, отклики!
Дайте знать, что вы думаете по данной теме материала в комментариях. За комментарии, отклики, подписки, лайки, дизлайки огромное вам спасибо!
В css есть специальный тег, который и обозначает и выводит горизонтальную линию! Это иногда бывает очень полезным!
Горизонтальная линия сплошная - css
В данном пункте разберем создание горизонтальной линии с помощью блока div.
Для этого на м понадобится:
Далее нам понадобится attribute style
Соединим наш код горизонтальной сплошной линии вместе:
Пример вывода горизонтальной сплошной линии с помощью блока div
Пример вывода горизонтальной сплошной линии толщина 5px
Горизонтальная линия точками - css
В следующем пункте разберем, как сделать горизонтальную линию с помощью точек. Если в выше приведенном пункте унас была "горизонтальная линия сплошная", то в этом пункте мы сделаем "горизонтальную линию точками!"
Для этого нам понадобится:
Опять будем использовать двойной тег div:
Читайте также: