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

Question

[Человек]

Добрый день.
Подскажите как правильно адаптивно сверстать такой разделитель в тексте?
prntscr.com/eri45h

Делал вот так:

<h2 class="block-title divider-title">
       Наш подход
</h2>

.divider-title:before
    content: ' '
    width: 210px
    height: 42px
    background-image: url("/images/divider-left.png")
    display: inline-block
  .divider-title:after
    content: ' '
    width: 210px
    height: 42px
    background-image: url("/images/divider-right.png")
    display: inline-block

Но это немного не то, что нужно. Нужно чтобы на <768px эти картинки не выталкивали текст и не переносили на новую строку. Как сделать так, чтобы они оставались на месте слева и справа от заголовка, а если маленький экран, то обрезались соответственно (аля overflow:hidden)
prntscr.com/eri5th

Answer 1

[Ильдар Сарибжанов]

Для before и after делаете position: absolute; Первый смещаете на right: 100%; второй на left: 100%.

Проще показать
https://jsfiddle.net/3uvchckj/

Answer 2

[Николай]

Я бы так сделал)
codepen.io/Nickolyashka/pen/qrgxEm