Emoji checkmark as list bullet

Share & showcase
1

Here’s a little CSS snippet I just created which makes bullet list items have the green button w/ white checkmark emoji – :white_check_mark: – as their bullet points:

@counter-style check-emoji {
   system: cyclic;
   symbols: "\2705";
   suffix: "   ";
}

.listwithcheckmark ul {
   list-style-type: check-emoji;
}

.listwithcheckmark li {
   margin-bottom: 0.5em;
}

It also adds a little bit more space below each list item.

You can use this with the cssclass feature in your note’s front matter like this:

---
cssclass: listwithcheckmark
---

HOWEVER … If you do so you’ll change ALL bullet points of ALL unordered lists in your note. This might not be what you want.

I’d really like to learn how I could bring this to the next level and tell Obsidian per list which css class it should use. – Is this possible at all? I’d need to tell the list then which class to use … how?! There’s no markdown syntax to add a css class to a list, right? :thinking:
(And I don’t want to mix HTML into my markdown files …)

And even a level further: How would I tell Obsidian via CSS snippets which emoji I want to use for an item? Maybe I want to have 5 items, the first 4 should have the checkmark but the last should have a red X emoji (:x:) …
I guess that’s beyond the scope of CSS snippets, right? We’d need a plugin for that, right?

3 Likes