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

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

Использование 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
Редакторы: Влад Мержевич