Warum verschieben sich Inline-Elemente beim Schweben, wenn Fettschrift angewendet wird, und wie können Pseudoelemente dieses Problem lösen?

Inline-Elemente verschieben sich beim Schweben aufgrund von fettem Stil

Viele Entwickler stoßen auf das Problem, dass sich Inline-Elemente verschieben, wenn beim Schweben fette Schriftart angewendet wird. Dieses Problem kann beispielsweise bei Listen auftreten, wenn Listenelemente dynamischen Textinhalt haben.

Im bereitgestellten Beispiel wird ein horizontales Menü mithilfe von HTML-Listen und CSS erstellt und der Hover-Stil wird angewendet, um die Links fett darzustellen. Allerdings verschieben sich die Menüelemente beim Schweben aufgrund der Änderung der Elementbreite, die durch die Fettschrift verursacht wird.

Lösung mit Pseudoelementen

Um dieses Problem zu beheben, eine clevere Lösung Die Lösung besteht darin, ein unsichtbares Pseudoelement zu verwenden, um die Breite des Elements voreinzustellen. Der Inhalt dieses Pseudoelements entspricht dem des übergeordneten Elements und der Hover-Stil wird darauf angewendet. Durch das visuelle Ausblenden dieses Pseudoelements legen wir effektiv die Breite des übergeordneten Elements vorab fest, bevor wir den fetten Hover-Stil anwenden.

Hier ist der geänderte CSS-Code:

li {
    display: inline-block;
    font-size: 0;
}

li a {
    display:inline-block;
    text-align:center;
    font: normal 16px Arial;
    text-transform: uppercase;
}

a:hover {
    font-weight:bold;
}

/* SOLUTION */
/* The pseudo element has the same content and hover style, so it pre-sets the width of the element and visibility: hidden hides the pseudo element from actual view. */
a::before {
    display: block;
    content: attr(title);
    font-weight: bold;
    height: 0;
    overflow: hidden;
    visibility: hidden;
}

Durch Hinzufügen des Pseudoelements -Element und dem entsprechenden Hover-Stil wird die Breite des Elements voreingestellt, bevor der fette Stil angewendet wird. Dadurch verschieben sich die Menüelemente beim Hovern nicht mehr.

Verwendung und Überlegungen

Der Wert des Titelattributs für jeden Link sollte mit dem erwarteten Hover-Text übereinstimmen . Dadurch wird sichergestellt, dass das Pseudoelement die Breite für jeden Link korrekt voreinstellt.

Es ist wichtig zu beachten, dass diese Lösung speziell für Inline-Elemente mit dynamischem Textinhalt funktioniert. Für komplexere Elemente oder Szenarien können alternative Ansätze erforderlich sein.

Das obige ist der detaillierte Inhalt vonWarum verschieben sich Inline-Elemente beim Schweben, wenn Fettschrift angewendet wird, und wie können Pseudoelemente dieses Problem lösen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!