किसी भी तरफ क्षैतिज रेखाओं के साथ एक शीर्षक कैसे बनाएं

इस परिदृश्य में लंबवत रूप से केंद्रित क्षैतिज रेखाओं के साथ एक केंद्रित शीर्षक बनाने का कार्य शामिल है प्रत्येक तरफ, पृष्ठभूमि छवि की उपस्थिति के कारण पारदर्शी पृष्ठभूमि बनाए रखते हुए। शीर्षक को केन्द्रित करने और छद्म वर्ग का उपयोग करके एक रेखा बनाने के प्रयासों के बावजूद, शीर्षक के पाठ को पार करते समय रेखा को गायब करने में चुनौती बनी रहती है।

एक संभावित समाधान पारदर्शिता के साथ पृष्ठभूमि ढाल का उपयोग करना है जहां शब्द रहते हैं. हालाँकि, अलग-अलग शीर्षक लंबाई के साथ काम करते समय यह दृष्टिकोण अव्यावहारिक हो जाता है, जिससे ग्रेडिएंट स्टॉप का स्थान असंभव हो जाता है।

प्रारंभ में प्रदान किया गया कोड इस प्रकार है:

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

यह संशोधित कोड समस्या का समाधान करता है और यह सुनिश्चित करता है कि जब भी क्षैतिज रेखाएं शीर्षक के पाठ को पार करती हैं तो गायब हो जाती हैं।