Многострочный заголовок с горизонтальной линией с любой стороны ⇐ CSS

[Anonymous]

Я хотел бы создать заголовок, в котором есть горизонтальная линия пикселя слева и справа от горизонтально центрированного направления текста. Линия не должна быть видна за текстом, только слева и вправо. Ни один из примеров, которые я не нашел (например, направление с горизонтальной линией с обеих сторон), не работает, когда текст обертывает. Но когда текст оборачивает, «ограничивающая коробка» идет полная ширина. < /P>
Вот пример, демонстрирующий синий пиксельный линию и подчеркивая эффект «ограничивающей коробки», который я надеялся достичь красным, но вы можете видеть, что ограничивающая коробка идет полной шириной, когда заголовок обернут. < /P>
есть все, что может сделать что -то вроде этого, без этого, без этого. class = "Snippet">

.heading {
text-align: center;
display: flex;
position: relative;
}

.heading::before {
content: "";
position: absolute;
right: 0;
left: 0;
height: 1px;
background: blue;
top: 50%;
z-index: -1;
}

.heading__text {
display: inline-block;
background: red;
width: fit-content;
margin: 0 auto;
}< /code>

This is a short heading



This is a long heading which can wrap onto multiple lines
< /code>
< /div>
< /div>
< /p>


Подробнее здесь: https://stackoverflow.com/questions/797 ... ither-side