How to Create a Centered Heading with Horizontal Lines That Disappear When Crossing Text?

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:

<code class="css">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%;  
}  </code>

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

<code class="css">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;
}</code>

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

The above is the detailed content of How to Create a Centered Heading with Horizontal Lines That Disappear When Crossing Text?. For more information, please follow other related articles on the PHP Chinese website!