Bullet list with color removes formatting

[somethingfoo]

What I’m trying to do

I have a bullet list for an example:

• foo
  • bar
  • bar2

If i add color either by adding a span or font tag it removes the bullet list format.

Is there any way to color the bullet list without is losing the bullet list format in a quick way?

[woofy31]

The problem is that Obsidian doesn’t allow mixing HTML code with markdown code, that’s why the formatting gets removed - you have to choose either plain markdown with no colors, or use raw HTML code to create your lists any way you want.

[Synchronicity]

You can wrap some or all of a bullet’s text in HTML, but you can’t include the bullet mark (because you can’t use markdown inside HTML and vice versa).

So you can’t wrap the whole list—you have to mark up the text of each bullet individually, and exclude the bullet mark each time.

It’s not quite the same, but you can also put your bullet list inside a callout to make it stand out more from other text, which would be faster to do with longer lists.

EDIT:

Again not quite the same, but you might like the List Callouts plugin, which lets you highlight bullets in color individually by adding a single character to each one.

[holroy]

The other guys are correct, but there is a simple trick which can be used in both live preview and reading mode using tags to achieve your goal:

- foo
  - bar #red
  - bar2

And the CSS:

li>a[href="#red"],
.HyperMD-list-line.cm-line .cm-tag-red {
  display: none;
}

li:has(>a[href="#red"]),
li:has(>a[href="#red"])::before,
.HyperMD-list-line.cm-line:has(.cm-tag-red) {
  background-color: red !important;
  color: blue;
}

Would produce the following, reading mode on top, and live preview below:

I’ve opted for hiding the tag used to target the line to be colored, and due to that one should possibly select the tags to use carefully for this kind of purpose. I’m also not entirely sure why in reading mode only the list bullet is colored, and not the entire line, but that I reckon someone better at CSS than me could address.

Bonus tip: How to add a custom CSS snippet

• Goto Settings > Appearance and scroll down to “CSS snippets” section, and hit the folder icon on the far right. This opens up a file explorer window, in the folder vault/.obsidian/snippets, which is were you want to save your css snippet
• In this new window create a file, like myCss.css, where you copy the CSS into. Make sure this actually is a text file, and that the name ends in .css
• Back in Obsidian, you should now see your myCss in the list of CSS snippets. If not, hit the refresh button
• Final step is to click the enable button to the right of your file, and now your new CSS should be in effect
• If you later on make changes in the CSS snippet file, the effect should be immediate. If not, try disabling and re-enabling the snippet, or in some strange cases, you would need to reload Obsidian. In 99% of the cases, the changes are immediate, though.