Is there any way to add nested lists in Rich Text field

Design help General
22

Hi @spelap ,

You can just start typing it on a new line in the rich text element. e.g. 1. Banana will start a numbered list.

From there it’s just hitting enter to create new items and tab or shift-tab to indent items.

I’d recommend using Webflow’s designer build-mode rather than the legacy editor for a more solid edit experience.

If you want to style the numbering differently at different levels you can do that by adding an embed to the page with some custom CSS like this-

<style>
ol[role="list"] {
  list-style-type: decimal;
}
ol[role="list"] > li > ol[role="list"] {
  list-style-type: upper-alpha;
}
ol[role="list"] > li > ol[role="list"] > li > ol[role="list"] {
  list-style-type: lower-alpha;
}
</style>
23

Unfortunately, this method doesn’t make a multi-level numbered list.

Screenshot 2025-01-16 at 09.17.48

This is a great solution for the list element, but it is not working in the rich text editor

24

The code I gave you is for nested lists in the rich text element.
Here’s the hierarchy it’s configured for.

image
image472×129 2.66 KB

25

yes I noticed, but how do I make A 1.1. and a 1.1.1.?

27

Ah, I see what you’re trying to do.

1. Something
    1.1. Something
        1.1.1. Something

Technical numbering is a bit different - you want to use CSS counters here. This setup will work on a Rich Text Block you class hierarchical-list. My code here;

  • Will apply technical numbering to all ordered lists within your rich text element
  • Will restart for each one
  • Handles 3 levels only- you can make it deeper by continuing the same pattern
  • Doesn’t apply any level-specific styling, but you can
  • Works in the designer at design time, if the <style> chunk is in an embed rather than the before-/head custom code area.
<style>
.hierarchical-list > ol {
  counter-reset: level1;
}
.hierarchical-list ol {
  padding-left: 1.5em;
}
.hierarchical-list li {
  display: block;
  list-style: none;
}
.hierarchical-list > ol > li {
  counter-increment: level1;
}
.hierarchical-list > ol > li::before {
  content: counter(level1) ". ";
}
.hierarchical-list ol > li > ol {
  counter-reset: level2;
}
.hierarchical-list ol > li > ol > li {
  counter-increment: level2;
}
.hierarchical-list ol > li > ol > li::before {
  content: counter(level1) "." counter(level2) ". ";
}
.hierarchical-list ol > li > ol > li > ol {
  counter-reset: level3;
}
.hierarchical-list ol > li > ol > li > ol > li {
  counter-increment: level3;
}
.hierarchical-list ol > li > ol > li > ol > li::before {
  content: counter(level1) "." counter(level2) "." counter(level3) ". ";
}
</style>
1 Like
28

Thank you very much! This one works perfectly.

However, I believe a multi-level numbered list should be a functionality of Webflow and not something you have to style with css.

29

Webflow has a wishlist feature if you wanted to propose that. There may already be a request you can vote for.

https://wishlist.webflow.com/

However technical numbering isn’t a normal way to number lists on the web- it’s not directly part of HTML’s supported numbering schemes so it’s not as simple as exposing list-style in the style panel.

Also, Webflow does not have a “style builder” to custom engineer setups with CSS selectors, pseudoselectors, and content elements. The problem with lists is that the entire styling is based on element relationships like ol > li > ol >li for a 2nd level element.

There are ways but everything reasonable I can think of would require some heavy tradeoffs and limitations like prefab list patterns.