In web development CSS play one of the major role because without CSS websites looks pretty ugly so user experience would be very bad. Here CSS is a cascading style sheet so CSS will used to styling the markup language. To style ant HTML document we specifically use  selectors in CSS.

PSEUDO SELECTORS

         CSS pseudo selectors (class) are used to add some special effects and state to some selectors. we can easily use css pseudo selectors to make beautiful effects.

For example,

• :hover--> Style an element when a user mouses over it. *Style visited and unvisited links differently and get focus also.

       *syntax*
       selector :pseudo-class{
          property: value;
           }
  

       ex:1 button :hover{
                    color: grey;
                       }


        ex:2 button :visited{
                     color: red;
                      }

hover

        hover is a special effects take place on user mouses over it.

button :hover{ color: orange; }

focus

     Focus represents an element that has received focus. it is generally triggered when the user clicks or mouses over the element or selectors.

  input: focus{
  background-color: blue;

Before:

    Before is an pseudo selector in css represented as ::before and it is used to insert some content like logo, picture, text etc.,

Syntax:
 a::before {
  content: " ";
 }

Note:

1. before pseudo selector will not support inline level elements it takes actions for only block level elements.
2. Content can be empty or any text or logo.

After:

   after is also similar to before selector but only difference is after pseudo selector make changes after the element.

example, h1::after{ content: " "; display: block; width: 15px; border-radius: 10px; background-color: orange; }