How can numbers in numbered lists be styled in Webflow?

Published on
September 22, 2023

To style numbers in numbered lists in Webflow, you can use custom code or built-in Webflow features. Here are two methods you can use:

1. Custom code:

  • Add a custom code embed to your Webflow project.
  • Use CSS to style the numbers. You can target the li elements in the numbered list and use the list-style-type property to change the appearance of the numbers. For example, to change the numbers to uppercase Roman numerals, you can use:
ol {  list-style-type: upper-roman;}

2. Webflow built-in features:

  • Select the numbered list element on your Webflow page.
  • In the Style panel, expand the "List" section.
  • Use the "List type" dropdown to choose a different numbering style. Webflow offers options such as decimals, upper and lower Roman numerals, and alphabetic numbering.
  • Adjust other styling options like color, font size, and spacing to match your design.

Using these methods, you can easily style numbers in numbered lists in Webflow to match your design and create a visually appealing user experience.

Additional Questions:

  • How can I change the color of the numbers in a numbered list in Webflow?
  • Can I add custom animations to numbered lists in Webflow?
  • Is it possible to change the numbering style of nested list items in Webflow?