Как сделать подчёркивание заголовка?

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

Использование text-decoration

Свойство text-decoration со значением underline добавляет подчёркивание к тексту; такого рода подчёркивание можно наблюдать для ссылок по умолчанию. Созданная таким образом линия равна ширине текста и будет такого же цвета, что и сам заголовок. Изменить цвет линии можно через свойство text-decoration-color. В примере 1 показано применение text-decoration к элементу <h2>.

Пример 1. Использование text-decoration

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Подчёркивание</title> <style> h2 { text-decoration: underline; /* Добавляем подчёркивание */ text-decoration-color: red; /* Цвет линии */ } </style> </head> <body> <section> <h2>Культурный речевой акт в XXI веке</h2> <p>Действительно, мифопорождающее текстовое устройство иллюстрирует дискурс, и это придает ему свое звучание, свой характер.</p> </section> </body> </html>

Результат данного примера показан на рис. 1.

Вид линии, созданной через text-decoration

Рис. 1. Вид линии, созданной через text-decoration

Браузеры IE и Edge не поддерживают свойство text-decoration-color.

Использование border-bottom

Свойство border-bottom добавляет к элементу снизу линию заданной толщины, цвета и стиля. Такая линия занимает всю доступную ширину, несмотря на длину текста заголовка (рис. 2).

Вид линии, созданной с помощью border-bottom

Рис. 2. Вид линии, созданной с помощью border-bottom

Расстояние от линии до текста можно регулировать с помощью свойства padding-bottom, как показано в примере 2.

Пример 2. Использование border-bottom

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Подчёркивание</title> <style> h2 { border-bottom: 2px solid red; /* Добавляем подчёркивание */ padding-bottom: 5px; /* Расстояние от текста до линии */ } </style> </head> <body> <section> <h2>Культурный речевой акт в XXI веке</h2> <p>Действительно, мифопорождающее текстовое устройство иллюстрирует дискурс, и это придает ему свое звучание, свой характер.</p> </section> </body> </html>

Чтобы линия была на ширину текста, достаточно заголовок превратить в строчно-блочный элемент, добавив к селектору h2 свойство display со значением inline-block.

Использование ::after и content

Также можно сделать искусственную линию через комбинацию свойства content и псевдоэлемента ::after. Они лишь будут выводить пустой псевдоэлемент после заголовка, а уже вид этого псевдоэлемента определяется другими свойствами. На рис. 3 показана подобная линия.

Линия, созданная через ::after

Рис. 3. Линия, созданная через ::after

Положение такой линии относительно текста задается через свойство bottom с отрицательным значением, цвет линии через свойство background. На деле это получается не линия, а прямоугольный блок, поэтому используем фоновую заливку (пример 3).

Пример 3. Использование ::after

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Подчёркивание</title> <style> h2 { position: relative; /* Относительное позиционирование */ display: inline-block; /* Линия на ширину текста */ } h2::after { content: '; /* Выводим пустое содержимое */ position: absolute; /* Абсолютное позиционирование */ background: red; /* Цвет линии */ left: 0; /* Положение линии слева */ bottom: -5px; /* Положение линии */ width: 100%; /* Линия на ширину текста */ height: 2px; /* Высота линии */ } </style> </head> <body> <section> <h2>Культурный речевой акт в XXI веке</h2> <p>Действительно, мифопорождающее текстовое устройство иллюстрирует дискурс, и это придает ему свое звучание, свой характер.</p> </section> </body> </html>

Автор и редакторы

Автор: Влад Мержевич
Последнее изменение: 05.10.2018
Редакторы: Влад Мержевич
Как научиться разрабатывать сайты