Как сверстать такой элемент?

Question

[DTX]

Answer 1

[Назар Мокринский]

Flex контейнер, а в нём по краям узкие растягивающиеся блоки с красным фоном, а по средине текст. Этот вариант мне больше нравится.
Так же можно элемент с красным фоном и широкой белой рамкой, а внутри центрированный текст с отрицительными отступами.

Comments

[DTX]

плюс за флекс

Answer 2

[Сергей ZSA]

h2 (или любого другого тега) с центрированием, внутри span у которого inline-block, а также у него же before и after с такими же inline-block но размерами (ширина и высота) ну и конечно у span и у before и after vertical-align:middle; всё.

Answer 3

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

Сделай так!

<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/

Answer 4

[trushka]

text-align: center и псевдоэлементы inline-block с отрицательными отступами
https://jsfiddle.net/trushka/24nwxndo/

Comments

[DTX]

Отличная база, но даже тут можно убрать отрицательные отступы и ничего не измениться) Спасибо!