How to use Pseudo Element in CSS?

This is used to style specified parts of an element.

Syntax: –

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

Ex: –

p::first-letter { color: red; }

  • ::first-letter
  • ::first-line
  • ::selection
  • ::before
  • ::after

::first-letter-

This is used to add a style to the first letter of the specified selector (each). This can only be used with block-level elements.

  • background properties
  • font properties
  • padding properties
  • color properties
  • margin properties
  • border properties
  • line-height
  • text-transform
  • text-decoration
  • vertical-align (only if float is ‘none’)
  • float
  • clear

Ex: –

p::first-letter { color: red;}

::first-line-

This is used to add a style to the first line of the specified selector (each). This can only be used with block-level elements.

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

Ex: –

p::first-line { color: red;}

::selection-

This is used to matches the portion of an element that is selected by a user then apply the CSS rule in the selected content.

  • background properties
  • color properties
  • cursor properties
  • outline properties

Ex: –

p::selection { background-color: red; }

::before-

This is used to insert something before the content of each specified selector (each). We use content property to specify the content to insert.

Ex: –

p::before { content: “ Hello World”; }

::after-

This is used to insert something after the content of each specified selector (each). We use content property to specify the content to insert.

Ex: –

p::after { content: “ Hello DevOpsSchool”; }

Tagged : / / / / / /