Formatting outline list styles

Tips & Tricks
#1

I tried something that I hadn’t seen before, hoping that it might work. And it does, easily:

@@list-style:lower-roman;
# Item one
# Item two
# Item three
# Item four
# Item five
@@

yields:

image

Or you could use a class name and separate CSS like this:

@@.t1
# Item one
# Item two
# Item three
# Item four
# Item five
@@

<style>
.t1 {list-style: lower-latin;}
</style>

to get

image

This is not some deep, dark secret, I’m sure, but I hadn’t seen it mentioned anywhere:

What I wasn’t sure about was whether that CSS declaration would apply to the generated un/ordered list, or if there would be a wrapper outside it that got the CSS. There seem to be a plethora of <div> and <p> elements floating around, so it seemed a real possibility. But it this case, there wasn’t one.

Also worth noting is that it doesn’t matter if you’re using * or # as the list item identifier.

Finally, you can do much more with the CSS. For instance, with this CSS:

@counter-style circled-alpha {
  system: fixed;
  symbols: 🅐 🅑 🅒 🅓 🅔 🅕 🅖 🅗 🅘 🅙 🅚 🅛 🅜 🅝 🅞 🅟 🅠 🅡 🅢 🅣 🅤 🅥 🅦 🅧 🅨 🅩;;
  suffix: " ";
}
.t4 {
  list-style: circled-alpha; 
  li::marker {font-size: 1.5em;}
}

you can get a list that looks like this:

image

List outline styles.json (1.1 KB)

6 Likes