CSS Content

Pseudo-elements for Content

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

The CSS ::before Pseudo-element

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

h3::before
{

  content: url(smiley.gif);

}

The CSS ::after Pseudo-element

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

h3::after
{

  content: url(smiley.gif);

}

The CSS ::marker Pseudo-element

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

Example

::marker {

  color: red;
  font-size: 23px;

}

The CSS ::selection Pseudo-element

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

Example

::selection {
  color: red;

background: yellow;
}

The CSS ::backdrop Pseudo-element

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

Example

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

CSS Pseudo-elements Reference

For a complete list of all CSS Pseudo-elements, visit our CSS Pseudo-elements Reference.