Заголовок с горизонтальной линией посередине
galina2601 17-02-2021, 23:28 566 Уроки по CSS / СпискиОдин из способов сделать заголовок с горизонтальной линией по центру без изображения (background-image).
Есть недостаток – фон под заголовком должен быть однотонным иначе <span> будет виден.
Это блок со словом по центру
<div class="title-line">
<span>Подробности далее</span>
</div>
.title-line { font-size: 20px;
color: rgb(50, 50, 50);
text-transform: uppercase;
line-height: 1.5;
text-align: center;
position: relative; }
.title-line span { background: #fff;
display: inline-block;
padding: 0 18px;
position: relative; }
.title-line:before { content: '';
position: absolute;
top: 50%;
left: 0;
width: 100%;
border-top: 3px solid #961C18; /* стиль линии */
color: rgb(50, 50, 50);
text-transform: uppercase;
line-height: 1.5;
text-align: center;
position: relative; }
.title-line span { background: #fff;
display: inline-block;
padding: 0 18px;
position: relative; }
.title-line:before { content: '';
position: absolute;
top: 50%;
left: 0;
width: 100%;
border-top: 3px solid #961C18; /* стиль линии */
Вот так это будет выглядеть в итоге:
ОТЗЫВЫ
Подробности далее
Подробности далее