Один из способов сделать заголовок с горизонтальной линией по центру без изображения (background-image
).
Есть недостаток – фон под заголовком должен быть однотонным иначе <span>
будет виден.
.title {
font-size: 20px;
color: rgb(50, 50, 50);
text-transform: uppercase;
line-height: 1.5;
text-align: center;
position: relative;
}
.title span {
background: #fff;
display: inline-block;
padding: 0 18px;
position: relative;
}
.title:before {
content: '';
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 2px; /* ширина линии */
background: #f3f4f2; /* цвет линии */
}