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> |
chevron_right
filter_none
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> |
chevron_right
filter_none
Before Mouse move over:
After Mouse move over
Recommended Posts:
- How to write a:hover in inline CSS?
- CSS | :hover Selector
- Why is Java 'write once and run anywhere'?
- CSS | :read-write Selector
- How to write a Pseudo Code?
- HTML | DOM write() Method
- How to write an inline IF statement in JavaScript ?
- JavaScript | Program to write data in a text File
- Step by Step guide to Write your own WordPress Template
- AngularJS | ng-include Directive
- How to select an element by name with jQuery?
- How to detect the user's device using jQuery ?
- Generate random alpha-numeric string in JavaScript
- Ternary operator / Question mark and colon in JavaScript
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.
