Как сверстать декоративные линии над и под текстом?

Question

[Dymok]

Есть в макете вот такой блок:


Пытаюсь добавить декоративные линии с помощью псевдоэлементов:
codepen

Суть в том, что, допустим, на 1100px это выглядит как нужно, но если увеличить/уменьшить ширину экрана - они смещаются. Есть ли способ намертво закрепить их к h2? Спасибо.

Comments

[Александр]

Использовать before и after, конечно же

[Dymok]

Александр, я их и использую, посмотрите на codepen в посте. Я не очень понимаю, как их позиционировать относительно h2

Answer 1

[Anton Filippov]

https://codepen.io/vicodin/pen/vpvvXR

Comments

[Dymok]

Спасибо большое.

Answer 2

[lemme]

вместо left: 45%

left: 50%;
  transform: translateX(-50%);

Comments

[Dymok]

Спасибо большое.