Code

Custom List Bullet Color

Easily update Webflow's native bullet list color with this simple CSS script. Updating Webflow's native list color is actually simple with this custom CSS script.

How to add it

Add the custom CSS to head section of custom code or your global embed
Set No Bullets to remove default bullets in the list settings
Add a class and and set padding-left to list
Add a class to all items and set relative position

The code

CSS

                      <!-- Add to head tag -->
<style>
.ul--circle li::before {  
  content: " ";  
  width: 8px; /* Width of the bullet */  
  height: 8px; /* Height of the bullet */  
  background: #12b0eb; /* Set color for the bullet */  
  border-radius: 50%; /* Circle bullet */  
  position: absolute; /* Positioning the bulet as absolute. It wil relative to li item */  
  left: 0; /* Stick the bullet to the left side */  
  top: 8px; /* Align the bullet with the first line of li text. The value will depends on font-size and line-height */
}
</style>