What are pseudo elements


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


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

selector::pseudo-element {

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