Как сделать адаптивные линии с двух сторон заголовка

Нередко бывает, что нужно отобразить линии с обеих сторон заголовка. Чтобы оформить заголовок, как на страницах книги, или разграничить контент. Для этого используют псевдоэлементы ::before и ::after.

Пример

Lorem Ipsum

HTML


<h3 class="title-side">Lorem Ipsum</h3>
<h3 class="title-side title-side-center">Lorem Ipsum</h3>
<h3 class="title-side title-side-right">Lorem Ipsum</h3>

CSS


.title-side {
	overflow: hidden; /* Скрываем линии, чтобы они не выходили за ширину блока заголовка */
	margin: 30px 0; /* Отступ сверху и снизу */
	font-size: 1em; /* Размер шрифта */
    color: #5a5a5a; /* Цвет заголовка */
}
/* Заголовок по центру */
.title-side-center {
    text-align: center;
}
/* Заголовок справа */
.title-side-right {
    text-align: right;
}
.title-side:before,
.title-side:after {
	content: '';	
	display: inline-block;	
	vertical-align: middle; 
	box-sizing: border-box;
	width: 100%; /* Устанавливаем ширину в 100%, что сделает делает линию равной ширине тега заголовка */
	height: 1px; /* Высота линий */
    background: #f66d52; /* Цвет линий */
	border: solid #fff; /* Добавляем к линиям границу с цветом основного фона заголовка, для отступа от текста */
	border-width: 0 30px; /* Отступ от текста */
}
.title-side:before {
	margin-left: -100%;
}
.title-side:after {
	margin-right: -100%;
}