Как создать заголовок с горизонтальными линиями с обеих сторон

Этот сценарий включает в себя задачу создания центрированного заголовка с горизонтальными линиями, расположенными по центру по вертикали. с каждой стороны, сохраняя при этом прозрачный фон за счет наличия фонового изображения. Несмотря на попытки центрировать заголовок и создать линию с помощью псевдокласса, остается проблема: заставить линию исчезнуть, когда она пересекает текст заголовка.

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

Изначально предоставленный код выглядит следующим образом:

h1 {  
    text-align: center;  
    position: relative;  
    font-size: 30px;  
    z-index: 1;  
}  

h1:after {  
    content: '';  
    background-color: red;  
    height: 1px;  
    display: block;  
    position: absolute;  
    top: 18px;  
    left: 0;  
    width: 100%;  
}  

По ссылке, приведенной в ответе, измененная версия кода выглядит следующим образом:

h1 {
    position: relative;
    font-size: 30px;
    z-index: 1;
    overflow: hidden;
    text-align: center;
}
h1:before, h1:after {
    position: absolute;
    top: 51%;
    overflow: hidden;
    width: 50%;
    height: 1px;
    content: '\a0';
    background-color: red;
}
h1:before {
    margin-left: -50%;
    text-align: right;
}
.color {
    background-color: #ccc;
}

Этот измененный код решает проблему и гарантирует, что горизонтальные линии исчезнут всякий раз, когда они пересекают текст заголовка.