Heim > Artikel > Web-Frontend > 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:
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!