Периодически бывает нужно сделать заголовок с горизонтальными линиями по бокам от текста. Если попробовать сделать это, казалось бы, самым простым способом: создать у заголовка свойство css before (или after) с границей, которая служит линией и которую мы поднимаем на нужный уровень, то столкнемся с проблемами, которые не хочу здесь расписывать. Но нормально сделать таким способом не получается.
Поиск по интернет дает готовые приемы решения этого вопроса, которыми и хочу здесь поделиться.
Для заголовка используется тег div с классом .title и псевдоэлементы :before и :after. В div пишем нужный текст, а псевдоэлементы станут линиями по краям: :before — слева, а :after — справа.
Код html:
1 |
<div class="title">Текст</div> |
Код css:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
.title { /* Прячем часть линий, выходящие за пределы блока */ overflow: hidden; /* Выравниваем заголовок по центру, можно указать left, right для выравнивания влево или вправо */ text-align: center; /* Размер заголовка */ font-size: 25px; } .title:before, .title:after { /* Свойство content необходимо указывать хотя бы пустое, иначе псевдоэлементы не отобразятся */ content: ""; /* Свойства линий, выравнивание по центру по вертикали */ display: inline-block; vertical-align: middle; /* Ширина - 100% и указываем толщину линии */ width: 100%; height: 2px; /* Цвет линии */ background-color: #f4801a; /* Возможность для пседоэлементов изменить позицию линии */ position: relative; } .title:before { /* Ставим левую линию слева от текста, смещая ее на 100% влево */ margin-left: -100%; /* Отступ линии от заголовка */ left: -14px; } .title:after { /* Ставим правую линию справа от текста, смещая ее на 100% вправо */ margin-right: -100%; /* Отступ линии от заголовка */ right: -14px; } |
Для примера я разместил картинку такой реализации, хотя там я еще добавил дополнительные элементы (цветы) над линиями (сайт женский).
Доброго времени суток!
Подскажите пожалуйста, а как Вы адаптировали данный заголовок под мобильные устройства?
У меня почему-то заголовок не помещается.:(
Ольга, пришлите пример такого случая.
Огромное спасибо!
сделала с пунктирной линией, заменив background-color на border-top: 1px dashed #be9a6787;
Все супер!