Pseudo-Elements in Lists

suggest change

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);


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


Feedback about page:

Optional: your email if you want me to get back to you:

Table Of Contents