programplug Logo




CSS Pseudo-elements:

The CSS Pseudo-elements is used to make the specified parts of an element.CSS3 give a double-colon (::) syntax for pseudo-elements to difference between them and pseudo-class.

For example:
1 To insert the content after or before the content of an HTML element.
2 To be used in styling the first line or letter of an element.
Syntax:
	 selector::pseudo-element 
         {
        property:value;
         }
		 

The ::first-line Pseudo-element:
The ::first-line Pseudo-element is defined to add a special style to the first line of element and the length of the first line depends on the size of an element.

Example:
 <!DOCTYPE html> 
  <html> 
   <head>  
  <style>  
p::first-line CSS {
    color: #0000ff;
    font-variant: small-caps;
}
 </style>  
 </head>   
<body>  

 <p>This paragraph is styled in first line with different style.
          This paragraph is styled in first line with different style.
          This paragraph is styled in first line with different style.
          This paragraph is styled in first line with different style.
 </p>  

</body >  
 </html>  
  
Output:

This paragraph is styled in first line with different style. This paragraph is styled in first line with different style. This paragraph is styled in first line with different style. This paragraph is styled in first line with different style.


The :first-letter pseudo-element:
The ::first-line Pseudo-element is defined to add a special style to the first letter of element and this element format the first letter in a paragraph text and create the effect like drop cap.

Example:
<!DOCTYPE html> 
  <html> 
    <head>  
 <meta charset="UTF-10">  
 <title> CSS ::first-letter Pseudo-element</title>  
 <style type="text/css">  
    p::first-letter {
        color: #0000ff;
        font-size: xx-large;
    }
 </style>  
 </head>   
   <p>  This paragraph is styled in first line with different style.
    This paragraph is styled in first line with different style.
    </p>  

</body >  
 </html>  

Pseudo-elements and CSS Classes:
The Pseudo-elements can be combined with css classes.

Example:
<!DOCTYPE html> 
<html> 
<head>  
<style>  
p.intro::first-letter
 {
color: #ff0000;
font-size:200%;
}  
</style>  
</head>   
<body>  

<pclass="intro">My introduction.</p>
<p>The paragraph with a text</p>
</body >  
</html>  

Output:

My introduction.

The paragraph with a text

The ::after and ::after Pseudo-element:
The ::after Pseudo-element is used to insert the generated content after or before the content of an element.The CSS property is used to set the conjuction of pseudo element to insert the content which is generated.

Example:
<html> 
    <head>  
      <style type="text/css">  
         p:before
         {
            content: url(/images/bullet.gif)
         }
     p:after
     {
       content: url(/images)  
    }
       </style>  
     </head>   
    <body>  
     <h1>  Creating a heading</h1>  
<p> The Content is produced before and after the element.</p>


 </body >  
 </html>  
 





Our Services

Developing Cheapest Websites
Offer Digital Marketing
Provide College Projects
Attractive Website Developing
Summer Training,Industrial Training
SCO,SMO

Contact Us

Dehradun Uttarakhand India
www.programplug.com
info@programplug.com
08534019974
Designed By : Mridul Gupta

Other Link

About Us

Contact Us

Disclaimer

Privacy Policy