Pseudo-elements selectors

It select and style a part of an element. They are two types:

  • First-line pseudo-element
  • First-letter pseudo-element

First-line pseudo-element

The ::first-line pseudo-element is used to add a special style to the first line of a text like

  • font properties 
  • color properties 
  • background properties
  • word-spacing 
  • letter-spacing 
  • text-decoration 
  • vertical-align 
  • text-transform 
  • line-height 
  • clear
Example
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
p::first-line{
color: red;
font-variant: small-caps;
background-color: yellow;
}
</style>
</head>
<body>
<p>On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document. 
You can use these galleries to insert tables, headers, footers, lists, cover pages, and other document building blocks. When you create pictures, charts, or diagrams, they also coordinate with your current document look. </p> </body> </html>

First-letter pseudo-element

The ::first-letter pseudo-element is used to add a special style to the first letter of a text like

  • font properties 
  • color properties 
  • background properties
  • word-spacing 
  • letter-spacing 
  • text-decoration 
  • vertical-align 
  • text-transform 
  • line-height 
  • clear
Example
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
p::first-letter{
font-size: 100px;
color: red;
font-variant: small-caps;
background-color: yellow;
}
</style>
</head>
<body>
<p>On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document. 
You can use these galleries to insert tables, headers, footers, lists, cover pages, and other document building blocks. When you create pictures, charts, or diagrams, they also coordinate with your current document look. </p> </body> </html>
English Hindi