How to Create a Heading with Horizontal Lines on Either Side

This scenario involves the task of creating a centered heading with horizontal lines vertically centered on each side, while maintaining a transparent background due to the presence of a background image. Despite attempts to center the title and create a line using pseudo-class, the challenge remains in making the line disappear when it crosses the text of the title.

One potential solution is to utilize a background gradient with transparency where the words reside. However, this approach becomes impractical when dealing with varying title lengths, making the placement of gradient stops impossible.

The code provided initially is as follows:

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%;  
}  

Referencing the link provided in the answer, a modified version of the code is as follows:

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;
}

This modified code resolves the issue and ensures that the horizontal lines disappear whenever they cross the text of the title.