How to write :hover condition for a:before and a:after in CSS?
The :before and :after selectors in CSS is used to add content before and after an element. The :hover is pseudo-class and :before & :after are pseudo-elements. In CSS, pseudo-elements are written after pseudo-class.
Syntax:
a:hover::before { // CSS Property } a:hover::after { // CSS Property }
In CSS3 double colon(::) is used to denote pseudo-element. For IE8 or older use a single colon (CSS2 syntax) is used.
Example 1: This example uses :hover condition for a:before and a:after in an element.
<!DOCTYPE html> < html > < head > < title > :hover condition for a:before and a:after </ title > <!-- Style to add hover condition --> < style > a:hover::before { content: "Before -"; } a:hover::after { content: "-after"; } </ style > </ head > < body > < a href = "#" > Hover here </ a > </ body > </ html > |
Before Mouse move over:
After Mouse move over:
Example 2: This example uses :hover condition for a:before and a:after in an element.
<!DOCTYPE html> < html > < head > < title > :hover condition for a:before and a:after </ title > < style > a:hover::before { content: "Before -"; background-color: green; } a:hover::after{ content: "-after"; background-color: green; } </ style > </ head > < body > < a href = "#" > GeeksForGeeks </ a > </ body > </ html > |
Before Mouse move over:
After Mouse move over
Recommended Posts:
- How to write a:hover in inline CSS?
- CSS | :hover Selector
- How to disable a CSS :hover effect?
- How to unbind “hover” event using JQuery?
- How to open dropdown menu on hover in Bootstrap ?
- CSS | Animation to Change the Hover State of a Button/Image
- How to animate div width and height on mouse hover using jQuery ?
- if/else condition in CSS
- Why “0” is not equal to false in if condition in JavaScript ?
- Why is Java 'write once and run anywhere'?
- HTML | DOM write() Method
- CSS | :read-write Selector
- How to write a Pseudo Code?
- How to write an inline IF statement in JavaScript ?
- Kotlin Collection Write operations
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.