Request: custom css bullet point second third layer

Feature requests
1

Use case or problem

Hey very niche but I´d love a custom-css that replaces 2nd and 3rd layer of bullet points aswell as numbered lists to a custom symbol. → ↳ These would be my choices but anyone can choose their favs right. If anyone can help me with this you would make a person that reads code and panics very verry happy<33

Related feature requests (optional)

Here is a very similar css i found for first layer with » in Feb25 by Dawni.

@dawni

2

This should do it:

ul {
  list-style-type: disc;  /*ul, level 1*/
}

ul ul {
  list-style-type: circle;  /*ul, level 2*/
}

ul ul ul {
  list-style-type: square;  /*ul, level 3*/
}

Standard styles are:

disc: A filled circle (default for unordered lists)
circle: An empty circle
square: A filled square
decimal: Numbers (1, 2, 3, …) for ordered lists
upper-alpha: Uppercase letters (A, B, C, …)
lower-alpha: Lowercase letters (a, b, c, …)
lower-roman: Lowercase Roman numerals (i, ii, iii, …)
upper-roman: Uppercase Roman numerals (I, II, III, …)

As for other characters, you would probably need to use a ::before attribute, like

ul::before {
   content: "<some unicode char>";
}
3

Wasn’t sure whether you wanted your fourth and deeper layers to have the same marker as your first, repeat your pattern, or return to Obsidian’s default. Each of them seem possible, so I randomly picked the first option—where layers after three have the same marker that you set for the first layer.

See if this gets it done:

.callout-content ul > li::marker,
.is-live-preview .list-bullet::before,
.callout-content ul ul ul ul > li::marker,
.markdown-rendered ul.has-list-bullet > li::marker,
.markdown-rendered ul ul ul ul.has-list-bullet > li::marker {
	content: "-  ";
}

.callout-content ul ul > li::marker,
.HyperMD-list-line-2 .list-bullet::before,
.markdown-rendered ul ul.has-list-bullet > li::marker {
	content: "→  ";
}

.callout-content ul ul ul > li::marker,
.HyperMD-list-line-3 .list-bullet::before,
.markdown-rendered ul ul ul.has-list-bullet > li::marker {
	content: "↳  ";
}

.markdown-reading-view .list-bullet::before {
	display: none;
}

.is-live-preview .list-bullet::before,
.markdown-rendered ul.has-list-bullet > li::marker {
	color: var(--list-marker-color);
}

.list-bullet::after {
	display: none;
}

.cm-formatting-list-ul.cm-list-3,
.cm-formatting-list-ul.cm-list-2,
:not(.HyperMD-list-line-1) > .cm-formatting-list-ul.cm-list-1,
.cm-formatting-list-ul + :is(.cm-list-1, .cm-list-2, .cm-list-3) {
	margin-inline-start: -4px;
}