Верстка заголовка с горизонтальной линией слева и справа от текста
Опубликовано: 23.08.2018
Время от времени возникает необходимость сверстать необычный заголовок, в котором слева и/или справа от текста проходит горизонтальная линия, занимающая все свободное пространство.
Отступы word. Линейка word. Урок 2.
Выглядит это следующим образом (живой пример):
Заголовок с выравниванием слева
Заголовок с выравниванием по центру
Заголовок с выравниванием справа
Раньше для решения данной задачи я бы задействовал два тега: первому задал бы верхний бордюр, а второй сместил бы чуть вверх, задав ему белый фон и внутренний отступ слева и справа.
Однако, эту задачу можно решить и другим, более красивым способом — использовав всего один тег . Кроме того, данный способ выручает в том случае, когда нет возможности вставить в исходный код второй тег.
Как несложно догадаться, для добавления линий будут задействованы псевдоэлементы :before и :after.
Вот CSS-код с комментариями для основных свойств, решающих поставленную задачу:
.title { /* чтобы линии не выходили за ширину блока заголовка */ overflow: hidden; } .title:before, .title:after { content: ''; /* делаем линию строчно-блочной */ display: inline-block; /* выравниваем вертикально по середине */ vertical-align: middle; /* не позволяем ширине превысить 100% (будет добавлен бордюр) */ box-sizing: border-box; /* установка ширины в 100% делает линию равной ширине тега заголовка ** благодаря этому линия заполнит все свободное пространство ** слева и справа от текста */ width: 100%; height: 3px; background: #6CBD83; /* добавляем к линии левый и правый бордюр цветом основного фона заголовка ** благодаря этому создается нужный отступ между линиями и текстом */ border: solid #FFF; border-width: 0 10px; } .title:before { /* смещаем левую линию влево отрицательным отступом, равным 100% ширины ** благодаря этому линия встает слева от текста */ margin-left: -100%; } .title:after { /* смещаем правую линию вправо отрицательным отступом, равным 100% ширины ** благодаря этому линия встает справа от текста */ margin-right: -100%; }Вот таким хитрым кодом это и делается.
У меня есть еще один аналогичный вариант решения данной задачи — через абсолютное позиционирование псевдоэлементов :before и :after. Однако, он оказался непригодным к использованию из-за очередного бага в браузере Internet Explorer (даже в последних версиях).