Here are a few question-based article titles that fit your provided text: * How to Create a Centered Heading with Horizontal Lines on Both Sides (No Background)? * Want to Add Horizontal Lines to You

How to Create a Heading with Horizontal Lines on Both Sides Without Background

In this scenario, you need to create a centered page title with horizontal lines on both sides without any background color.

CSS Solution:

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

/*Optional for background color*/
.color {
    background-color: #ccc;
}

Explanation:

• h1 is positioned relatively and centered using text-align: center.
• Before and after elements are created using :before and :after and positioned absolutely at 51% top to vertically center them.
• The content property with 'a0' (non-breaking space) makes the lines disappear where the text is.
• overflow: hidden ensures the lines don't overlap the text.
• Optionally, you can use the .color class to add a background color if desired.

Note: This solution can handle titles of varying lengths without manually adjusting line placement.

The above is the detailed content of Here are a few question-based article titles that fit your provided text: * How to Create a Centered Heading with Horizontal Lines on Both Sides (No Background)? * Want to Add Horizontal Lines to You. For more information, please follow other related articles on the PHP Chinese website!