Selector- Pseudo-selector (Pseudo-element)

Pseudo-elements are 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.

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

• :first-line
• :first-letter
• ::before See content property
• ::after See content property

Below the pseudo element has an aqua border.

p::before{
   content: "What ever ... ";
   display: inline;
   border:1px solid aqua;
}

<p>This text will have "What ever" with an aqua border at its beginning</p>

• Pseudo-elements