Заголовок с горизонтальной линией посередине
Один из способов сделать заголовок с горизонтальной линией по центру без изображения (background-image
) на чистом CSS.
Есть недостаток – фон под заголовком должен быть однотонным иначе будет виден.
<div class="title"> <span>Заголовок</span> </div>
.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; /* цвет линии */ }