Как правильно оформить заголовок?

Question

[Людмила]

Добрый день!

Прошу помощи у тех кто может ее оказать)

Вопрос вот в чем: на главной странице сайта каждый блок предворяется заголовком, т.е.
есть блок Заголовок. Так вот каждый заголовок должен с обеих сторон обрамляться горизонтальными полосами - четко посередине заголовка



Я реализовала это при помощи :before и :after

.dopline-content::before {
  background: #848484 none repeat scroll 0 0;
  content: "";
  height: 1px;
  left: 15px;
  position: absolute;
  top: 20px;
  width: 230px;}

.dopline-content::after {
  background: #848484 none repeat scroll 0 0;
  content: "";
  height: 1px;
  right: 15px;
  position: absolute;
  top: 20px;
  width: 230px;}

Но оно не очень правильно работает... Особенно когда заголовки разной длины. Плюс ко всему при уменьшении экрана (к примеру на планшете) - получается вообще, что попало...

Не могу придумать, как это реализовать по другому - чтобы и в десктопе было красиво, и при адаптивности было правильно.

Вот как-то так.

Уважаемые гуру! Подскажите, как это сделать максимально правильно.

Заранее благодарю за любую помощь и пинок в нужном направлении.

Comments

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

Но оно не очень правильно работает - это как?
Вы просите исправить что-то, о чем забыли рассказать

Answer 1

[Михаил Еникеев]

Попробуйте так

<div class="strike">
    <span>Hello World</span>
</div>

.strike {
        display: block;
        text-align: center;
        overflow: hidden;
        white-space: nowrap; 
    }

    .strike > span {
        position: relative;
        display: inline-block;
    }
	
    .strike > span:before,
    .strike > span:after {
        content: "";
        position: absolute;
        top: 50%;
        width: 9999px;
        height: 1px;
        background: red;
    }

    .strike > span:before {
        right: 100%;
        margin-right: 15px;
    }

    .strike > span:after {
        left: 100%;
        margin-left: 15px;
    }

ПРИМЕР
https://jsfiddle.net/miha8722/n3hmk70x

Comments

[Людмила]

Ваше решение пошло на ура! Большое спасибо!

[Михаил Еникеев]

Людмила: Очень рад что помог вам!

Answer 2

[Ivan Bogachev]

Как вариант - линию сделать градиентом. codepen

Comments

[Людмила]

Интересное решение) Спасибо, попробую.