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;
}

Пример:

Check out this Pen!

Ссылки

Для вставки кода используйте HTML-теги
<pre><code class="php">ваш код</code></pre>

  • MaRSeL

    Благодарю)