Code

Custom Diamond List Bullet Shape

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

How to add it

Add the CSS to your sites head custom code section or via your global embed
Update the class name to diamond for your list items

The code

CSS

                      <!-- Add to head tag -->
<style>
.ui--diamond li::before {  
  content: " ";  width: 8px; /* Width of the bullet */  
  height: 8px; /* Height of the bullet */  
  transform: rotate(45deg); /* Rotating the rectangle */  
  background: #12b0eb; /* Set color for the bullet */  
  position: absolute; /* Positioning the bullet as absolute. It will relative to the li item */  
  left: 0; /* Stick the bullet to the left side */  
  top: 9px; /* Align the bullet with the first line of li text */
}
</style>