Pseudo-elements are added to selectors but instead of describing a special state, they allow you to style certain parts of a document.

The content attribute is required for pseudo-elements to render; however, the attribute can have an empty value (e.g. content: "").

div::after {
  content: "after";
  color: red;
  border: 1px solid red;
}

div {
  color: black;
  border: 1px solid black;
  padding: 1px;
}

div::before {
  content: "before";
  color: green;
  border: 1px solid green;
}

(opens new window)

Pseudo-elements are often used to change the look of lists (mostly for unordered lists, ul).

The first step is to remove the default list bullets:

ul {
  list-style-type: none;
}

Then you add the custom styling. In this example, we will create gradient boxes for bullets.

li:before {
  content: "";
  display: inline-block;
  margin-right: 10px;
  height: 10px;
  width: 10px;
  background: linear-gradient(red, blue);
}

HTML

<ul>
   <li>Test I</li>
   <li>Test II</li>
</ul>

Result

(opens new window)

Syntax

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

Parameters

Remarks