Bugl — code interview practice that feels like a game

Loading lesson path

Pseudo-elements for Content

Pseudo-elements for content allow you to insert content before or after elements, style list markers, and more.

The ::before pseudo-element is used to insert some content before the content of a specified element.

Use the content property to specify the content to insert.

Example

Formatted code

h3::before {
  content: url(smiley.gif);
}

Live preview

The ::after pseudo-element is used to insert some content after the content of a specified element.

Use the content property to specify the content to insert.

Example

Formatted code

h3::after {
  content: url(smiley.gif);
}

Live preview

The ::marker pseudo-element is used to style the list item markers.

Example

Formatted code

::marker {
  color: red;
  font-size: 23px;
}

Live preview

The ::selection pseudo-element is used to style the part of a text that is selected by a user.

Example

Formatted code

::selection {
  color: red;
  background: yellow;
}

Live preview

The ::backdrop pseudo-element is used to style the viewbox behind a dialog box or popover element.

Example

Formatted code

dialog::backdrop {
  background-color: lightgreen;
}

Live preview