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
- CSS | Animation to Change the Hover State of a Button/Image
- Why “0” is not equal to false in if condition in JavaScript ?
- 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 ?
- How to write shorthand for document.getElementById() method in JavaScript ?
- JavaScript | Program to write data in a text File
- Step by Step guide to Write your own WordPress Template
- How to detect operating system on the client machine using JavaScript ?
- What is the difference between children and childNodes 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.
