Customize Number Styling on Ordered Lists

Control the styling of your ordered list numbers without having to use SVG's!

See it in action

Say goodbye to boring ordered list numbers. This code allows you to create fully functional, custom ordered list numbers that you can use anywhere on your site.

The code

Paste this code inside the <head> section of your page settings. Code largely inspired by this article by 456 Berea st.

‍



<style>

/*initiates a counter and removes default margin and padding*/
ol {
	counter-reset:li; 
	margin-left: 0px; 
	padding-left: 0px; 
}


/*Setting list items up for the custom numbers*/
ol > li {
	position: relative; /* Allows us to place numbers as absolute pseudo elements  */
	margin-left: 20px; /* Creates room for numbers */
	padding-left: 20px;/* Provides some space on left of list item */
	list-style: none; /* Prevents standard numbering */
}

/*Creating the custom numbers using pseudo elements*/
ol > li:before {
	content:counter(li); /* Places counter as the content */
	counter-increment:li; /* Increment the counter by 1 */

/* Styling and positioning the number */
	position:absolute;
	top: -2px;
	left: -24px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	width: 32px;
  height: 32px;
	border: 1px solid #919191;
  border-radius: 50%;
	font-weight: medium;
	text-align: center;
  padding: 2px;
}

</style>

Setting it up

Start off by placing an ordered list wherever you want it on you page. This can be a standalone list or a list within a rich text element.
Add the above code to the <head> section of your page settings.
By default this code will apply the styling to all ordered lists on your page. If you would only like the styling to be applied to a specific list, you can simply give that list a class in Webflow designer and adjust the code accordingly. Lets say you gave the target list a class of <span class=class-tile>my list</span>. In this case, simply swap out "ol" to ".my-list" in your code and the styling will only be applied to lists with that class.

Adrian Raath

Adrian Raath

Customize Number Styling on Ordered Lists

See it in action

The code

Setting it up