Custom List Bullet Color

Example

Custom List Bullet Color

Description

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.

Instructions

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

Javascript snippet

Copy

CSS snippet

Copy

<!-- 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>

HTML snippet

Copy

Flowradar

expert
Get it
Like
Like

Snippet tags

List
CSS
Flowradar
Code snippets
Custom List Bullet Color

Related code snippets

Go to snippets
Custom Diamond List Bullet Shape

Custom Diamond List Bullet Shape

Flowradar
10

Instead of the default circle for your Webflow list items this CSS snippet allows you to add a diamond as an alternative design.

Custom Triangle List Bullet Shape

Custom Triangle List Bullet Shape

Flowradar
1

Customize the shape of Webflow's native list item for your Webflow site with this custom CSS solution. Want a different shape than Webflow's native circle list item shape? With this method you can easily update the list item shape.

DRAG
Real-time sorting by

More from author

No items found.
No items found.
DRAG
Real-time sorting by