CSS: Текст поверх линии
Очень часто дизайнеры требует от верстальщиков писать текст поверх линии на неоднородном фоне.
Читая сегодня Хабр, увидел очередной велосипед и решил поделиться своим вариантом решения данной проблемы.
Исходный чистый 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
Благодарю)
Не за что.
А что делать если нужно чтобы такой текст размещался на каком-то фоне? Вот тут нашел более красивое решение такого заголовка — заголовко на css
Мой вариант прекрасно работает на любом фоне. Смотрите выше пример на codepen. Посмотрел по вашей ссылке — тоже самое )