Skip to content
Related Articles

Related Articles

How to write :hover condition for a:before and a:after in CSS?
  • Last Updated : 26 Feb, 2019

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 arrow_drop_up
Recommended Articles
Page :