Wie erstelle ich elegante zentrierte Überschriften mit horizontalen Balken ohne Textüberlappung?

Elegante Überschriften mit horizontalen Balken

Beim Erstellen zentrierter Überschriften mit horizontalen Balken auf beiden Seiten kann es schwierig sein, ein Überkreuzen der Balken zu vermeiden der Text. Hier ist eine Lösung, um diesen Effekt mit reinem CSS zu erzielen:

Lösungsübersicht

Diese Methode verwendet Pseudoelemente, um die horizontalen Balken zu erstellen und sie an einer bestimmten relativen Position zu platzieren zum Text. Zusätzlich wird ein negativer Rand auf einem der Balken zusammen mit einem Überlauf angewendet, um die Balken auszublenden, in denen der Text vorhanden ist.

Implementierung

Um diese Lösung zu implementieren, folgen Sie den Anweisungen Diese Schritte:

1. Definieren Sie die folgende CSS-Regel für die Überschrift:

<code class="css">h1 {
    position: relative;  
    font-size: 30px;  
    z-index: 1;
    overflow: hidden;
    text-align: center;
}</code>

Diese Regel positioniert die Überschrift, gibt die Schriftgröße an und aktiviert das Ausblenden des Überlaufs.

2. Pseudoelemente für die Balken erstellen:

<code class="css">h1:before, h1:after {
    position: absolute;
    top: 51%;
    overflow: hidden;
    width: 50%;
    height: 1px;
    content: '\a0';
    background-color: red;
}</code>

Diese Pseudoelemente werden in der Mitte der Überschrift mit einer bestimmten Breite und Höhe platziert und sie fungieren als horizontale Balken.

3. Versetzen und richten Sie den linken Balken aus:

<code class="css">h1:before {
    margin-left: -50%;
    text-align: right;
}</code>

Diese Regel wendet einen negativen Rand auf den linken Balken an, um ihn auszurichten und sicherzustellen dass es dort ausgeblendet wird, wo der Text erscheint.

Durch die Implementierung dieser CSS-Regeln können Sie mühelos zentrierte Überschriften mit horizontalen Balken erstellen, die verschwinden, wenn sie den Text überqueren, ohne zusätzliche HTML-Elemente einzufügen.

Das obige ist der detaillierte Inhalt vonWie erstelle ich elegante zentrierte Überschriften mit horizontalen Balken ohne Textüberlappung?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!