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?
Ähnliche Themen
CSS-Stylesheets in HTML einbinden
Tutorial | 0 Kommentare
Website Performance: Javascript und CSS komprimiert ausliefern und Ladezeiten verkürzen
Tutorial | 0 Kommentare
Mouseover Buttons mit CSS ohne Nachladen
Tutorial | 0 Kommentare
jQuery: CSS Stylesheet Switcher
Tutorial | 1 Kommentar
CSS: Hover Effekt nur bei gefüllten Tabellenzellen
Frage | 1 Antwort
CSS: Sollte man :before oder ::before schreiben?
Frage | 1 Antwort
Bilder, CSS, JS und Seiten neu laden trotz Browser-Cache
Tipp | 2 Kommentare
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.
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:
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
...funktioniert leider nicht mit Klasse voran:
Das hat keinerlei Effekt.
06.11.2016 um 21:11
Natürlich funktioniert es mit Klasse:
Du musst alles ohne das Leerzeichen zusammen schreiben.
03.06.2017 um 17:08