Верстка заголовка с горизонтальной линией слева и справа от текста

Время от времени возникает необходимость сверстать необычный заголовок, в котором слева и/или справа от текста проходит горизонтальная линия, занимающая все свободное пространство.

.title {
  /* чтобы линии не выходили за ширину блока заголовка */
  overflow: hidden;
}
.title:before,
.title:after {
  content: '';

  /* делаем линию строчно-блочной */
  display: inline-block;

  /* выравниваем вертикально по середине */
  vertical-align: middle;

  /* не позволяем ширине превысить 100% (будет добавлен бордюр) */
  box-sizing: border-box;

  /* установка ширины в 100% делает линию равной ширине тега заголовка
  ** благодаря этому линия заполнит все свободное пространство
  ** слева и справа от текста
  */
  width: 100%;
  height: 3px;
  background: #6CBD83;

  /* добавляем к линии левый и правый бордюр цветом основного фона заголовка
  ** благодаря этому создается нужный отступ между линиями и текстом
  */
  border: solid #FFF;
  border-width: 0 10px;
}
.title:before {
  /* смещаем левую линию влево отрицательным отступом, равным 100% ширины
  ** благодаря этому линия встает слева от текста
  */
  margin-left: -100%;
}
.title:after {
  /* смещаем правую линию вправо отрицательным отступом, равным 100% ширины
  ** благодаря этому линия встает справа от текста
  */
  margin-right: -100%;
}

Отправить комментарий

Другие статьи рубрики "заголовки"