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.

This are not pseudo-class

Syntax

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

List

Example

first-letter

  • The HTML
<p>A first letter pseudo class demo where the first letter A will get a bigger font-size</p>
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


Powered by ComboStrap