Добавление горизонтальных линий до и после заголовка или изображения на CSS
Для того, чтобы добавить в качестве обрамительного элемента горизонтальные линии до и после заголовка (картинки, логотипа и т.д.) можно использовать 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> добавляем позиционирование, чтобы … подробнее