Styling a bullet list in reading view

Custom CSS & Theme Design
2

There’s a slightly older version here covering Live Preview and Reading views:

Something more recent to cover Reading view:

ul:not(li > *) > li > .list-bullet::after { } /* level 1*/
ul:not(li > *) > li > ul > li > .list-bullet::after { } /* level 2 */
ul:not(li > *) > li > ul > li > ul > li> .list-bullet::after { } /* level 3 */
...

Combining it with Style Bullets in Lists by Level - #2 by rmdelatorre, you end up with the below. You could give that a try.

:root {
    --bullet-new-color: purple; 
}

/* level 1 - large bullet */
ul:not(li > *) > li > .list-bullet::after,
.HyperMD-list-line-1 .list-bullet:after {
    height: 5px;
    width: 5px;
    border-radius: 50%;
    background-color: var(--bullet-new-color);
} 

/* level 2 - hyphen */
ul:not(li > *) > li > ul > li > .list-bullet::after,
.HyperMD-list-line-2 .list-bullet:after {
    height: 1px;
    width: 7px;
    border-radius: 0%;
    background-color: var(--bullet-new-color);
} 

/* level 3 - hollow bullet */
ul:not(li > *) > li > ul > li > ul > li> .list-bullet::after,
.HyperMD-list-line-3 .list-bullet:after {
    height: 4px;
    width: 4px;
    background-color: transparent;
    border-color: var(--bullet-new-color);
    border-style: solid;
    border-radius: 50%;
    border-width: 1px;
} 

...
2 Likes