CSS Pseudo Elements

CSS pseudo-elements are used to add special effects to some selectors. We do not need to use JavaScript or any other script to use those effects.

As an example, a pseudo-element can be used to style the first letter or the first line of an element. The pseudo-elements can also be used to insert the content after or before an element.

Pseudo-elementDescription
::first-lineUse this element to add special styles to the first line of the text in a selector.
::first-letterUse this element to add special style to the first letter of the text in a selector.
::beforeUse this element to insert some content before an element.  
::afterUse this element to insert some content after an element.

::first-line pseudo-element

This pseudo element adds the special effects to the first line of the text. It supports the following CSS property:-

  • Color properties (such as color)
  • Font properties (such as font-style, font-family, font-size, font-color, and many more).
  • Background properties (such as background-color, background-repeat, background-image, and background-position).
  • Other properties are word-spacing, letter-spacing, line-height, vertical-align, text-transform, text-decoration.
Input:-

Index.html
	
<body> 
	 <p> Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.</p>
</body>

Style.css
p::first-line {  
   background-color: #ccc;  
}  

Output:-


::first-letter pseudo-element

This pseudo element target only the first letter of the element and applied to only block-level element

  • Color properties (such as color)
  • Font properties (such as font-style, font-family, font-size, font-color, and many more).
  • Margin properties (such as margin-top, margin-right, margin-bottom, and margin-left).
  • Border properties (like border-top, border-right, border-bottom, border-left, border-color, border-width, and many more).
  • Padding properties (such as padding-top, padding-right, padding-bottom, and padding-left).
  • Background properties (such as background-color, background-repeat, background-image, and background-position).
  • Text related properties (such as text-shadow, text-transform, text-decoration, etc.).
  • Other properties are vertical-align (only when the float is ‘none’) word-spacing, line-height, line-spacing
Input:-

Index.html
	
<body> 
	 <p> Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.</p>
</body>

Style.css
p::first-letter {  
   background-color: #ccc;  
}  

Output:-


::before pseudo-element

This pseudo element allows us to add something before the element’s content. It is used to add something before the specific part of an element. Generally, it is used with the content property and that property comprises of the value we want before any element.

Input:-

Index.html
	
<body> 
	 <p> Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.</p>
</body>

Style.css
p::before { 
   content: "I am before content"; 
   background-color: #ccc;  
}  

Output:-


::after pseudo-element

This pseudo element works similar to ::before pseudo-element, but it inserts the content after the content of the element. It is used to add something after the specific part of an element.

It uses the same concept of content to store the content we want after any element.

Input:-

Index.html
	
<body> 
	 <p> Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.</p>
</body>

Style.css
p::after { 
   content: "I am after content"; 
   background-color: #ccc;  
}  

Output:-

We can also use this after and before pseudo element to make pointed arrows. Below example illustrate it with the help of border and position property.

Input:-

Index.html
	
<body> 
	 <p> Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.</p>
</body>

Style.css
p::after { 
    content: "";
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #ccc;
    position: absolute;
    top: 40px;  
}  

Output:-