Selector- Pseudo-selector (Pseudo-element)

About

Pseudo-elements are element added to selectors to be able to select a sub-content of a content element. See CSS - Addessing model (through selector and properties).

They will also add an element into the flow.

Syntax

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

List

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

Example

first-letter

• The HTML

<p>A first letter pseudo class demo where the first letter A will get a bigger font-size</p>

• The CSS that selects the first letter of paragraphs and applies:
  • a font-size of 1.5 rem
  • and an aqua border to see the pseud element.

p::first-letter {
   font-size: 1.5rem;
   border:1px solid aqua;
}

• Result:

before / after

See the content property for before and after pseudo-element example.

Documentation / Reference

• en-US/docs/Web/CSS/Pseudo-elements