Home > Article > Web Front-end > 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:
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!