Pseudo Elements and Pseudo Classes

Pseudo elements and Pseudo classes are very interesting part of CSS, these are the elements and classes that are not present in the document. But the Pseudo elements and classes apply the style to elements based on their state or position in the document.
            For "Pseudo classes" you can go through the post posted earlier CSS Link Styling.The classes used apply style according to the state ":link, :visited, :hover, :active". 

Pseudo Elements

Pseudo elements will start with (:)or (::). These pseudo elements are like a virtual element, by using these we apply styles to the elements in the html/xhtml document. The pseudo elements and classes can be combined. Following are the Pseudo elements that are used in CSS :

• :after : This pseudo element will insert the content after the content of the element.

          Syntax :               

<class\element>:after{style}

      

         

       Example: 

       

div.test_after:after
{
content: "This is test after";
font-size: 15px;
text-decoration: underline;
color:red;
}

This is the test for the after class.

• :before : This pseudo element will insert the content before the content of the element.
  
  
            Syntax :               
  
  
  <class\element>:before{style}
        
           
         Example: 
  
  
         
  
  div.test_before:before
  {
  content: "This is test before";
  font-size: 15px;
  text-decoration: underline;
  color:red;
  } 

           

This is the test for the before class.

Note: The :after and :before use "content property" to set the content before or after element.

• :first-letter : This pseudo element will apply the style to the first character of the text.

          Syntax :               

<class\element>:first-letter{style mentioned}

   

         

       Example: 

       

div.test_firstletter:first-letter

{

font-size: 15px;
text-decoration: underline;
color:red;
font-weight: bold;
}

This the test for the first letter of the line. It will be styled as per the style in the above class.     

                         

• :first-line : This pseudo element will apply the style to the first line of the text.

          Syntax :               

<class\element>:first-line{style mentioned}

      

     
    

       Example: 

       

div.test_firstline:first-line
{
content: "This is test before";
font-size: 15px;
text-decoration: underline;
color:red;
font-weight: bold;
}

This is the test to show first-line of the paragraph will be styled. The rest of the text will appear as it is. There will be no changed in it. first-line pseudo element is very useful to apply styles to first line in paragraph on any other tag.