Заголовок с линиями по бокам
/*Иногда нужно сверстать заголовок, у которого слева и справа располагаются линии, которые занимают все оставшиеся пространство. Для такого случая у меня есть рецепт как сверстать сложный заголовок с линиями по бокам текста.*/
/*Мы будем использовать обычный тег div с классом .title и его псевдоэлементы :before и :after. В div напишем нужный текст заголовка, а псевдоэлементы будут линиями: :before линия слева, :after соответственно будет линией справа.*/
<div class="title">Наш заголовок</div>
.title {
/* Чтобы спрятать часть линий, которые
** будут вылазить за пределы блока */
overflow: hidden;
/* Выравнивание заголовка по центру,
** можно использовать left, right */
text-align: center;
/* Тут можно добавить другие стили для заголовка */
font-size: 30px;
}
.title:before,
.title:after {
/* Обязательно указываем пустое свойство content,
** иначе псевдоэлементы не появятся на сайте */
content: "";
/* Указываем что наши линии будут строчно-блочные и
** выравнивание по высоте - по центру */
display: inline-block;
vertical-align: middle;
/* Задаем ширину 100% и выбираем высоту линии,
** в нашем примере она равна 4 пикселям */
width: 100%;
height: 4px;
/* Добавляем цвет для линии */
background-color: #00cf00;
/* Добавляем пседоэлемантам возможность изменить
** позицию линии, для создания отступов от текста */
position: relative;
}
.title:before {
/* Смещаем левую линию на 100% влево, чтобы линия
** встала рядом с текстом слева */
margin-left: -100%;
/* Указываем в пикселях отступ линии от текста заголовка */
left: -14px;
}
.title:after {
/* Смещаем правую линию на 100% вправо, чтобы
** линия встала рядом с текстом справа */
margin-right: -100%;
/* Указываем в пикселях отступ линии от текста заголовка */
right: -14px;
}