CSS → Линии вокруг текста

Один из способов вывода линий до и после текста на всю длину контейнера:

HTML:

<h1>Текст</h1>

CSS:

h1 {
  overflow: hidden;
  position: relative;
  margin: 0;
  text-align: center;
  white-space: nowrap;
}
h1:before,
h1:after {
  content: '';
  display: inline-block;
  position: relative;
  top: -1px;
  width: 50%;
  height: 1px;
  vertical-align: middle;
  background: black;
}
h1:before {
  left: -10px;
  margin-left: -50%;
}
h1:after {
  left: 10px;
  margin-right: -50%;
}

Минусы: длинный текст не будет переносится на новую строку и будет обрезаться. Решение — обернуть текст в дополнительный тег span и добавить:

h1 > span {
  display: inline-block;
  vertical-align: middle;
  white-space: normal;
  max-width: 90%;
}

Демо
Источник