How to create multi-numbered outline

Some questions trigger me more than others, and especially if they ask for something which I don’t know how to do, but I do believe is doable. Like this one, I was sure I’ve seen something like this, but I’m not that well versed in CSS, so I couldn’t tell how to do it immediately. However, with some googling and playing around I came up with the following CSS-code:

.markdown-preview-section ol>li::marker {
  content: counter(list-item) "\A0"
}

.markdown-preview-section ol>li ol>li::marker {
  content: counters(list-item, ".") "\A0"
}

.markdown-preview-section ol>li ol>li ol>li::marker {
  content: counters(list-item, ".") "\A0"
}

.markdown-preview-section ol>li ol>li ol>li > ol>li::marker {
  content: counters(list-item, ".") "\A0"
}

To get this to work you need to add the CSS code above into its own file, and store it in ..vault../.obsidian/snippets/someName.css, and then go to Obsidian settings > Appearance (and at the end there) > someName and enable that CSS-snippet.

Which produced the following output:

Source editing to the left, and reading view to the right. More care could surely be taken to produce nicer output. (Most of this answer by the way is based upon the following Webmasters Stack Exchange answer: css - Numbered list with subclauses - Webmasters Stack Exchange)

Hope this helps! :smiley:

11 Likes