Hii,
 In this blog i am going to share a simple example in which i have used CSS pseudo-element using which we can insert any content, images or create any design before, or after any html tag.
Syntax:

selector:pseudo-element {property: value}

There are many CSS pseudo-elements,Out of which the most commonly used pseudo-elements are

:first-line, :first-letter, :before, :after.
 

Common CSS

div.main{background: rgba(109,0,25,1);
background: -moz-linear-gradient(-45deg, rgba(109,0,25,1) 11%, rgba(109,0,25,0.98) 15%, rgba(216,208,239,0.75) 75%,
rgba(233,231,248,0.71) 86%, rgba(235,233,249,0.71) 87%);
background: -webkit-gradient(left top, right bottom, color-stop(11%, rgba(109,0,25,1)), color-stop(15%,
rgba(109,0,25,0.98)), color-stop(75%, rgba(216,208,239,0.75)), color-stop(86%, rgba(233,231,248,0.71)), color-stop(87%,
rgba(235,233,249,0.71)));
background: -webkit-linear-gradient(-45deg, rgba(109,0,25,1) 11%, rgba(109,0,25,0.98) 15%, rgba(216,208,239,0.75) 75%,
rgba(233,231,248,0.71) 86%, rgba(235,233,249,0.71) 87%);
background: -o-linear-gradient(-45deg, rgba(109,0,25,1) 11%, rgba(109,0,25,0.98) 15%, rgba(216,208,239,0.75) 75%,
rgba(233,231,248,0.71) 86%, rgba(235,233,249,0.71) 87%);
background: -ms-linear-gradient(-45deg, rgba(109,0,25,1) 11%, rgba(109,0,25,0.98) 15%, rgba(216,208,239,0.75) 75%,
rgba(233,231,248,0.71) 86%, rgba(235,233,249,0.71) 87%);
background: linear-gradient(135deg, rgba(109,0,25,1) 11%, rgba(109,0,25,0.98) 15%, rgba(216,208,239,0.75) 75%,
rgba(233,231,248,0.71) 86%, rgba(235,233,249,0.71) 87%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6d0019', endColorstr='#ebe9f9', GradientType=1 );
max-width:800px;margin:0 auto;
}

1) CSS pseudo-element :first-line is used to add CSS to the first line of the relative html tag.
Example:
CSS:
 

div.css_first_line{border-bottom:3px solid #000;}
div.css_first_line p:first-line {text-decoration: underline;}
div.css_first_line p.noline:first-line { text-decoration: none;font-size:20px;font-weight:bold;color:green; }

HTML:
 

<div class="css_first_line">
 <h1>CSS pseudo-element :first-line is used to add CSS to the first line of the relative html tag</h1>
   <p class="noline">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  
   <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,</p>
 </div>

2) CSS pseudo-element :first-letter is used to add CSS to the first letter of the relative html tag.
Example:
CSS:

div.css_first_letter{border-bottom:3px solid #000;}
div.css_first_letter p:first-letter { font-size: 5em; }
div.css_first_letter p.normal:first-letter { font-size: 10px; }

HTML:
 

<div class="css_first_letter">
 <h1>CSS pseudo-element :first-letter is used to add CSS to the first letter of the relative html tag.</h1>
   <p class="normal">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  
   <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,</p>
 </div>

3)CSS pseudo-element :before is used to insert any content, images or create any design before the relative html tag.

4) CSS pseudo-element :after is used to insert any content, images or create any design after the relative html tag.
CSS:
 

div.css_after_before p::after{width:10px;height:10px;border-radius:100%;border:1px solid green;background-color:green;display:inline-block;;content:"";}
div.css_after_before p{max-width:800px;margin:0 auto;display:inline-block;}
div.css_after_before p::before{width:10px;height:10px;border-radius:100%;border:1px solid green;background-color:green;display:inline-block;;content:"";}

HTML:
 

<div class="css_after_before">
 <h1>CSS pseudo-element :before and :after is used to insert any content, images or create any design before or after the relative html tag.</h1>
  
   <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,</p>
 </div>