22 Stimmen

CSS: :hover für :before und :after

Frage von WebHorn | Letztes Update am 31.10.2022 | Erstellt am 06.09.2014

Ist es irgendwie möglich, den Pseudo-Klassen-Selektor :hover für die Pseudo-Elemente :before und :after zu definieren?

Konkret geht es mir um einen Link, den ich mit CSS-Regeln mithilfe von a:before und a:after designen möchte. Je nachdem, ob die Maus gerade über dem Link steht, soll allerdings ein anderer Inhalt vor und nach dem Link erscheinen, also der  Anwendungsfall für :hover.

Interessanterweise funktionieren bei mir a:before, a:after und a:hover alleine, nicht aber die Kombination aus beidem (a:before:hover und a:after:hover). Wie kann ich beides kombinieren oder ist dieser CSS-Selektor gar nicht möglich?

AntwortenPositivNegativDatumStimmen
3Beste Antwort5 Stimmen

Bei einer Kombination von :hover und :before beziehungsweise :after kommt es auf die richtige Reihenfolge an - erst :hover, dann :before und :after.

So funktioniert es:

a:hover:before
a:hover:after

Es kommt also immer zuerst der Pseudo-Klassen-Selektor (:hover) und erst danach der Pseudo-Element-Selektor (:before). Sowohl :before als auch :after sollten immer am Ende stehen.
Letztes Update am 31.10.2022 | Erstellt am 09.09.2014

AntwortenPositiv Negativ
-24 Stimmen

...funktioniert leider nicht mit Klasse voran:

.klasse a:hover:after {
  color: #93c21b !important;
}

Das hat keinerlei Effekt.
06.11.2016 um 21:11

Positiv Negativ
24 Stimmen

Natürlich funktioniert es mit Klasse:

a.klasse:hover:after {
  color: #93c21b !important;
}

Du musst alles ohne das Leerzeichen zusammen schreiben.
03.06.2017 um 17:08

Positiv Negativ
Antworten
Antworten

Ähnliche Themen

CSS-Stylesheets in HTML einbinden

Tutorial | 0 Kommentare

jQuery: CSS Stylesheet Switcher

Tutorial | 1 Kommentar

Wichtiger Hinweis

Bitte beachten Sie: Die Beiträge auf askingbox.de sind Beiträge von Nutzern und sollen keine professionelle Beratung ersetzen. Sie werden nicht von Unabhängigen geprüft und spiegeln nicht zwingend die Meinung von askingbox.de wieder. Mehr erfahren.

Jetzt mitmachen

Stellen Sie Ihre eigene Frage oder schreiben Sie Ihren eigenen Artikel auf askingbox.de. So gehts.