Pseudo-element ::before

p::before
Insert something before the content of each

element.

::before creates a pseudo-element that is the
first child of the selected element. It is often
used to add cosmetic content to an element with
the content property. It is inline by default.

If the content property is not specified, has an
invalid value, or has normal or none as a value,
then the ::before pseudo-element is not rendered.
It behaves as if display: none is set.

Examples

q::before {
  content: "«";
  color: blue;
}

q::after {
  content: "»";
  color: red;
}

li {
  padding: 0.5em;
}

li[aria-current="step"] {
  font-weight: bold;
}

li[aria-current="step"]::after {
  content: " \21E6"; /* Hexadecimal for Unicode Leftwards white arrow*/
  display: inline;
}