Нужна помощь в вёрстке заголовка с линиями по бокам

Question

Господа верстальщики и фронтендеры подскажите пожалуйста как сверстать заголовок для секции с линиями по бокам. Если делаю выравнивание по центру - все работает, но когда мне нужно чтобы заголовок был слева на 120px от края левую линию не видно.

.title-left {
  overflow: hidden;
  margin-left: 120px;
  /*text-align:center;*/
}

.title-left h2 {
  display: inline-block;
  vertical-align: middle;
}

.title-left:before,
.title-left:after {
  content: "";
  display: inline-block;
  width: 100%;
  height: 2px;
  background-color: #363636;
  position: relative;
}
.title-left:before {
  margin-left: -100%;
  left: -14px;
}

.title-left:after {
  margin-right: -100%;
  right: -14px;
}

<div class="title-left">
  <h2>Каталог книг</h2>
</div>

Answer 1

margin - это внешний отступ. Левая линия выходит за границы элемента, так как у элемента установлен overflow: hidden ее не видно.

Для решения нужно либо заменить отступ на внутренний, с помощью padding

.title-left {
  overflow: hidden;
  padding-left: 120px;
  /*text-align:center;*/
}

.title-left h2 {
  display: inline-block;
  vertical-align: middle;
}

.title-left:before,
.title-left:after {
  content: "";
  display: inline-block;
  width: 100%;
  height: 2px;
  background-color: #363636;
  position: relative;
}
.title-left:before {
  margin-left: -100%;
  left: -14px;
}

.title-left:after {
  margin-right: -100%;
  right: -14px;
}

<div class="title-left">
  <h2>Каталог книг</h2>
</div>

либо убрать overflow: hidden

.title-left {
  margin-left: 120px;
  /*text-align:center;*/
}

.title-left h2 {
  display: inline-block;
  vertical-align: middle;
}

.title-left:before,
.title-left:after {
  content: "";
  display: inline-block;
  width: 100%;
  height: 2px;
  background-color: #363636;
  position: relative;
}

.title-left:before {
  margin-left: -100%;
  left: -14px;
}

.title-left:after {
  margin-right: -100%;
  right: -14px;
}

<div class="title-left">
  <h2>Каталог книг</h2>
</div>

Answer 2

Все гораздо проще.

.title-left {
  border: none;
  border-top: 2px solid;
}

.title-left__title {
  padding: 0 .5em;
  margin-left: 120px;
}

<fieldset class="title-left">
  <legend class="title-left__title"><h2>Каталог книг</h2></legend>
</fieldset>

БЛОГ НА HUSL

Нужна помощь в вёрстке заголовка с линиями по бокам

Ответы (2 шт):