What are pseudo elements

 

How to use pseudo elements in css to add before or after of html elements.


Answer
 

A CSS pseudo-element is used to style specified parts of an element
The syntax of pseudo-elements:

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

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

p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}

Note: The ::first-line pseudo-element can only be applied to block-level elements.

The following properties apply to the ::first-line pseudo-element:

  • font properties
  • color properties
  • background properties
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clear