Hervorhebung eines Tags mit CSS
Ich habe ein HTML-Tag, das ich mit CSS3 erstellt habe. Ich möchte eine bestimmte Registerkarte hervorheben. Im Idealfall möchte ich das Tag, das anzeigt, dass es aktiv ist, leuchten lassen. Ich verwende ': nach', um die Form des Tags zu erstellen, aber dies erlaubt mir nicht, um die tatsächliche Form herum hervorzuheben.
Hier ist eine Geige: Ссылка
HTML
%Vor%CSS
%Vor%Wie Sie sehen können, ist das Highlight alles außer dem Pfeil / Dreieck. Weiß jemand, wie ich das gleiche hervorgehobene Aussehen um den Pfeil / Dreieck auch haben könnte?
1 Antwort
Es gibt eine Lösung, an die ich denken kann, die jedoch eine geringfügige Änderung an Ihrem DOM erfordert. Die Lösung besteht darin, den Linktext in ein <span> -Element einzufügen, und anstelle von Rahmen für das Dreieck verwenden wir ein gedrehtes Rechteck für diesen Effekt. Da der Hintergrund im Z-Index jedoch höher sein muss als das gedrehte Rechteck, wird eine Verschachtelung benötigt (so dass wir stattdessen den blauen Hintergrund auf dem <span> -Element deklarieren.
Siehe Geige hier: Ссылка Für eine dreidimensionale Visualisierung des Stapels, siehe hier: Ссылка
Da nur zwei Pseudoelemente möglich sind und Sie sowohl ::before als auch ::after bereits für stilistische Zwecke verwenden, können wir nur eine zusätzliche Verschachtelungsebene verwenden:
Für das CSS (Hinweis: Sie könnten der CSS-Transformationseigenschaft Lieferantenpräfixe hinzufügen):
%Vor%