Hier sind einige fragenbasierte Artikeltitel, die zu Ihrem bereitgestellten Text passen: * Wie erstelle ich eine zentrierte Überschrift mit horizontalen Linien auf beiden Seiten (ohne Hintergrund)? * Sie möchten horizontale Linien hinzufügen

So erstellen Sie eine Überschrift mit horizontalen Linien auf beiden Seiten ohne Hintergrund

In diesem Szenario müssen Sie einen zentrierten Seitentitel mit erstellen horizontale Linien auf beiden Seiten ohne Hintergrundfarbe.

CSS-Lösung:

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

Erklärung:

• h1 wird mit text-align:center relativ positioniert und zentriert.
• Vorher- und Nachher-Elemente werden mit :before und :after erstellt und absolut bei 51 % oben positioniert, um sie vertikal zu zentrieren.
• Die Inhaltseigenschaft mit „a0“ (geschütztes Leerzeichen) lässt die Zeilen dort verschwinden, wo sich der Text befindet.
• overflow: versteckt sorgt dafür, dass die Zeilen den Text nicht überlappen.
• Optional können Sie Sie können die .color-Klasse verwenden, um bei Bedarf eine Hintergrundfarbe hinzuzufügen.

Hinweis: Diese Lösung kann Titel unterschiedlicher Länge verarbeiten, ohne die Zeilenplatzierung manuell anzupassen.

Das obige ist der detaillierte Inhalt vonHier sind einige fragenbasierte Artikeltitel, die zu Ihrem bereitgestellten Text passen: * Wie erstelle ich eine zentrierte Überschrift mit horizontalen Linien auf beiden Seiten (ohne Hintergrund)? * Sie möchten horizontale Linien hinzufügen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!