0 0 Stimmen

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

Frage von WebHorn | 06.09.2014 um 18:52 Uhr

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

NetLabel

Profil anzeigen | Nachricht
Avatar
2Beste Antwort
4 Stimmen

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

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.
09.09.2014 um 13:20 Uhr

AntwortenPositiv Negativ
-13 Stimmen

...funktioniert leider nicht mit Klasse voran.

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

06.11.2016 um 21:11 Uhr

Positiv Negativ
02 Stimmen

Natürlich funktioniert es mit Klasse:

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

03.06.2017 um 17:08 Uhr

Positiv Negativ
Antworten

Ähnliche Themen

Wichtiger Hinweis

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.