Заголовок с горизонтальной линией на css

Памятка оформления заголовков с горинтальными линиями по краям на чистом css, без применения скриптов

title

Раньше для решения данной задачи я бы задействовал два тега: первому задал бы верхний бордюр, а второй сместил бы чуть вверх, задав ему белый фон и внутренний отступ слева и справа.

Однако, эту задачу можно решить и другим, более красивым способом — использовав всего один тег. Кроме того, данный способ выручает в том случае, когда нет возможности вставить в исходный код второй тег.

Как несложно догадаться, для добавления линий будут задействованы псевдоэлементы :before и :after.

html код:

css код:

Результат:
Заголовок с выравниванием слева
Заголовок с выравниванием по центру
Заголовок с выравниванием справа

Вот таким хитрым кодом это и делается.

Второй способ рисования линий к заголовку

Мы будем использовать обычный тег div с классом .title и его псевдоэлементы :before и :after. В div напишем нужный текст заголовка, а псевдоэлементы будут линиями: :before линия слева, :after соответственно будет линией справа.

Код html: Код css:

Результат:

Наш заголовок

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *