CSS Pseudo elements


Go to main Page

Pseudo-elements in CSS

To define a special parts of the element we use pseudo-elements.

Basic Syntax


  selector::pseudo-element {
  property: value;
}


The ::first-letter Pseudo-element

We can change the first letter of an element by using ::pseudo-elements.


  p::first-letter {
  color: red;
  font-size: 50px;
}



The first letter pseudo-elements can only be implemented on the following properties:

1)font properties
2)color properties
3)background properties
4)word-spacing
5)letter-spacing
6)text-decoration
7)vertical-align
8)text-transform
9)line-height
10clear

The ::first-line Pseudo-element

We can change the first line of an element by using ::pseudo-elements.


  p::first-letter {
  color: orangered;
  font-size: 18px;
}



The first letter pseudo-elements can only be implemented on the following properties:

1)margin properties
2)padding properties
3)border properties
4)text-decoration
5)font properties
6)color properties
7)background properties
8)text-transform
9)line-height
10)float