Here are a few title options that fit your provided content: Option 1 (Focus on Challenge): How to Center a Heading with Horizontal Lines on Either Side Without Extra HTML? Option 2 (Focus on Solu

Heading with Horizontal Lines on Either Side

This question explores the challenge of creating page titles (headings) centered with horizontal lines that are vertically centered on either side. The goal is to achieve this effect without adding extra HTML and while considering a background image on the page.

A Possible Solution

CSS:

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

HTML:

The above is the detailed content of Here are a few title options that fit your provided content: Option 1 (Focus on Challenge): How to Center a Heading with Horizontal Lines on Either Side Without Extra HTML? Option 2 (Focus on Solu. For more information, please follow other related articles on the PHP Chinese website!