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

My Personal Notes

Recommended Posts: