Как делать такие заголовки?

Question

[Дмитрий Гормаш]

Добрый день. Интересует, как сделать такой заголовок, у которого по бокам прорисованы горизонтальные линии. Пример(Рис 1)

Answer 1

[Кирилл]

На мой взгляд самый простой вариант - через псевдоэлементы (:before :after).
Примерно вот так: codepen.io/GoooodBoy/pen/wKmBKN

Answer 2

[Александр Латышев]

Используйте flex. Результат тут.

<div class="container">
  <div class="item"></div>
  <h1>Заголовок</h1>
  <div class="item"></div>
</div>

div.container{
  background-color: #334455;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
h1{
  flex: content;
  width: auto;
  margin: 0.5em;
}
div.item{
  flex: auto;
  background-color: #112233;
  height: 2px;
}

Answer 3

[Максим Тимофеев]

Варианты:
1. На background положить картинку или две.
1.1. Контейнер для заголовка с полоской на фоне, а заголовок перекрывает фон и имеет width:auto; и margin:auto;
2. Таблицей 3 столбца две строки, средняя rowspan-2 у левой верхней и правой верхней бордер снизу

Answer 4

[Даниил Чепенко]

а что будет происходить с заголовком при уменьшении экрана? Линии остаются или сужаются просто

Answer 5

[Игорь Воротнёв]

Если уж совсем по правильному, да чтобы оно резиновое было - используйте псевдоэлементы :before, :after и flexbox.