Для того, чтобы добавить в качестве обрамительного элемента горизонтальные линии до и после заголовка (картинки, логотипа и т.д.) можно использовать CSS и сделать при этом вполне адаптивный вариант.
Для этого нужно использовать псевдоэлементы :before и :after. Html-конструкция должна выглядеть следующим образом:
|
1 2 3 |
<div class="block"> <span>ЗАГОЛОВОК</span> </div> |
Для основной обертки используем следующие CSS-правила:
|
1 2 3 4 5 6 |
.block { text-align: center; /* выравнивание заголовка по центру обертки */ width: 80%; /* ширина обертки. На самом деле для фиксированной верстки можно использовать и px, но лучше сразу адаптировать под разные устройства, т.к. это, что называется, тренди :-) */ margin: 0 auto; /* выравнивание обертки по центру документа */ overflow: hidden; /* прячем линии за границами обертки, чтобы в случае изменения ширины экрана линии не выходили за ее пределы */ } |
Для дочернего элемента <span> добавляем позиционирование, чтобы впоследствии управлять расположением линий в рамках обертки:
|
1 2 3 |
.block span { position: relative; } |
Теперь перейдем непосредственно к оформлению псевдоэлементов (будущих линий):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
.block span:before { display: block; /* делаем псевдоэлемент блоком для последующего работы с ним, как с простым div'ом */ width:1000px; /* устанавливаем ширину линию. Можно использовать произвольную ширину */ content: ''; /* позволяет вставлять генерируемое содержание в текст страницы, которое первоначально в тексте отсутствует */ position: absolute; /* абсолютное позиционирование для управления линиями */ border-bottom: 1px solid #000; /* бордер псевдо дива, т.е. сама линия */ top:50%; /* позиционирование по вертикали */ right: 110px; /* позиционирование по горизонтали */ } /* аналогичные стили для второго псевдоэлемента */ .block span:after { display: block; width:1000px; content: ''; position: absolute; border-bottom: 1px solid #000; top:50%; left: 110px; } |
Вот собственно все. Линии слева и справа от заголовка появились, они полностью на CSS, смотряться аккуратно как на десктопе, так и на мобильных устройствах.
у меня не получилось
У меня тоже не получилось
Отлично работает!!!
Спасибо большое.
Рад, что материал приносит пользу! 🙂
спасибо за материал – хорошо изложен, только мне не совсем понятны 2 вещи: 1. что отвечает за отступ от текста 2. откуда взялись 110рх? если поясните, буду оч рада
Спасибо вам за комментарий. Относительно вопросов:
1) Если я правильно понял вопрос, то как раз именно left и right у псевдоэлементов в 110px отвечают за отступ от текста
2) 110px – это динамический отступ горизонтальных линий от текста из первого вопроса. Если будет другое слово, то отступ должен быть подобран другой. Не очень универсальное решение, согласен.