PSEUDO ELEMENTS


A CSS pseudo-element is used to style specified parts of an element.

For example, it can be used to:
  • Style the first letter, or line, of an element
  • Insert content before, or after, the content of an element

SYNTAX

The syntax of pseudo-elements:
[SELECTOR]::pseudo-element { propery: value; }

::BEFORE

The ::before pseudo-element can be used to insert some content before the content of an element.

The following example inserts an image before the content of each <h1> element:
h1::before { content: url('[IMAGE URL]'); }

Heading 1

::AFTER

The ::after pseudo-element can be used to insert some content after the content of an element.

The following example inserts an image after the content of each <h1> element:
h1::after { content: url('[IMAGE URL]'); }

Heading 1

ALL PSEUDO ELEMENTS

  • ::after - Insert something after the content of the selected element
  • ::before - Insert something before the content of the selected element
  • ::first-letter - Selects the first letter of each selected element
  • ::first-line - Selects the first line of each selected element
  • ::selection - Selects the portion of an element that is selected by a user

CUSTOM BULLET POINTS

The ::before pseudo-element can be used to insert some content before the content of an element.

The following example inserts an image before the content of each <h1> element:
.innerList { list-style-type: none; } .innerList li { position: relative; } .innerList li::before { content: ''; display: block; position: absolute; height: 6px; width: 6px; top: 10px; left: -20px; background: #0083C3; border-radius: 50%; }
  • ::after - Insert something after the content of the selected element
  • ::before - Insert something before the content of the selected element
  • ::first-letter - Selects the first letter of each selected element
  • ::first-line - Selects the first line of each selected element
  • ::selection - Selects the portion of an element that is selected by a user

FONTAWESOME ICONS

By using content and font-family: 'FontAwesome', you can insert icons  using pseudo-elements. As these icons are font glyphs they can be style using font properties e.g. color, font-size etc.
[SELECTOR]::before { content: '\f10b'; font-family: 'FontAwesome'; }
Search for relevant icon Unicode: https://fontawesome.com/icons

Note: FontAwesome set in Duda is out of date so some icons will be unavailable or display different icon.

Heading 1

ADD SHAPE TO SELECTED NAV ITEM

By using content and font-family: 'FontAwesome', you can insert icons  using pseudo-elements. As these icons are font glyphs they can be style using font properties e.g. color, font-size etc.
.dmNavItemSelected::before { content: ''; position: absolute; top: 0; left: calc(50% - 5px); width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #0083C3; }