Очень часто дизайнеры требует от верстальщиков писать текст поверх линии на неоднородном фоне.
Читая сегодня Хабр, увидел очередной велосипед и решил поделиться своим вариантом решения данной проблемы.
Исходный чистый HTML:
<h1 class="line">Текст поверх линии</h1>
И очень простой CSS:
.line {
position: relative;
z-index: 1;
overflow: hidden;
text-align: center;
}
До и после заголовка вставляем строки с фоном под цвет линии:
.line:before,
.line:after {
content: '';
display: inline-block;
width: 100%;
height: 1px;
background: #000;
z-index: -1;
position: relative;
vertical-align: middle;
}
Расставляем отступы:
.line:before {
right: 15px;
margin: 0 0 0 -100%;
}
.line:after {
left: 15px;
margin: 0 -100% 0 0;
}
Пример:
See the Pen mCjLF by mihdan (@mihdan) on CodePen.0
Ссылки
Источник: https://www.kobzarev.com/makeup/css-text-over-the-line/
