Unaligned rendering of bullet points under Reading view and Source view

I replaced the bullet points to some emoji using css, it works perfectly in reading view and source view in most cases. But when I do a plain indentation in one of the bullet point, they no longer sync as the same.

custom-bulletpoints.css (4.0 KB)

/* LEVEL 1 */
.markdown-reading-view ul > li > .list-bullet:after,
.markdown-source-view.mod-cm6 .HyperMD-list-line-1 .list-bullet:after {
/* Bullet */
    height: 5px;
    width: 5px;
    border-radius: 50%;
    background-color: var(--bullet-new-color1);
} 

/* LEVEL 2 Bullet Points with Emoji */
.markdown-reading-view ul > li > ul > li > .list-bullet:after,
.markdown-source-view.mod-cm6 .HyperMD-list-line-2 .list-bullet:after {
    /* Replace content with emoji */
    content: '⭐';
    /* Adjust the size and alignment as needed */
    font-size: 1em; /* Adjust the size of the emoji */
    vertical-align: middle;
    margin-right: 5px; /* Space between emoji and text */

    /* Clear previous styling */
    height: auto;
    width: auto;
    border-radius: 0;
    background-color: transparent;
} 

/* LEVEL 3 Bullet Points with Emoji */
.markdown-reading-view ul > li > ul > li > ul > li > .list-bullet:after,
.markdown-source-view.mod-cm6 .HyperMD-list-line-3 .list-bullet:after {
    /* Replace content with emoji */
    content: '💠';
    /* Adjust the size and alignment as needed */
    font-size: 1em; /* Adjust the size of the emoji */
    vertical-align: middle;
    margin-right: 5px; /* Space between emoji and text */

    /* Clear previous styling */
    height: auto;
    width: auto;
    border-radius: 0;
    background-color: transparent;
} 

/* LEVEL 4 Bullet Points with Emoji */
.markdown-reading-view ul > li > ul > li > ul > li > ul > li >.list-bullet:after,
.markdown-source-view.mod-cm6 .HyperMD-list-line-4 .list-bullet:after {
    /* Replace content with emoji */
    content: '🌸';
    /* Adjust the size and alignment as needed */
    font-size: 1em; /* Adjust the size of the emoji */
    vertical-align: middle;
    margin-right: 5px; /* Space between emoji and text */

    /* Clear previous styling */
    height: auto;
    width: auto;
    border-radius: 0;
    background-color: transparent;
} 

/* LEVEL 5 Bullet Points with Emoji */
.markdown-reading-view ul > li > ul > li > ul > li > ul > li > ul > li > .list-bullet:after,
.markdown-source-view.mod-cm6 .HyperMD-list-line-5 .list-bullet:after {
    /* Replace content with emoji */
    content: '🍐';
    /* Adjust the size and alignment as needed */
    font-size: 1em; /* Adjust the size of the emoji */
    vertical-align: middle;
    margin-right: 5px; /* Space between emoji and text */

    /* Clear previous styling */
    height: auto;
    width: auto;
    border-radius: 0;
    background-color: transparent;
} 

/* LEVEL 6 Bullet Points with Emoji */
.markdown-reading-view ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > .list-bullet:after,
.markdown-source-view.mod-cm6 .HyperMD-list-line-6 .list-bullet:after {
    /* Replace content with emoji */
    content: '☂️';
    /* Adjust the size and alignment as needed */
    font-size: 1em; /* Adjust the size of the emoji */
    vertical-align: middle;
    margin-right: 5px; /* Space between emoji and text */

    /* Clear previous styling */
    height: auto;
    width: auto;
    border-radius: 0;
    background-color: transparent;
} 

/* LEVEL 7 Bullet Points with Emoji */
.markdown-reading-view ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > .list-bullet:after,
.markdown-source-view.mod-cm6 .HyperMD-list-line-7 .list-bullet:after {
    /* Replace content with emoji */
    content: '🔅';
    /* Adjust the size and alignment as needed */
    font-size: 1em; /* Adjust the size of the emoji */
    vertical-align: middle;
    margin-right: 5px; /* Space between emoji and text */

    /* Clear previous styling */
    height: auto;
    width: auto;
    border-radius: 0;
    background-color: transparent;
} 

/* bullet color */
:root { --bullet-new-color1: rgb(89,89,223);}
:root { --bullet-new-color2: rgb(89, 227, 178);}
:root { --bullet-new-color3: rgb(223,89,89);} 
:root { --bullet-new-color4: rgb(89, 219, 223);}
:root { --bullet-new-color5: rgb(245, 32, 213);}
:root { --bullet-new-color6: rgb(248, 186, 41);}
:root { --bullet-new-color7: rgb(22, 109, 117);}

Correct render of both views:

Reading View:

image

Source View:

image

Incorrect render of both views:

Reading View:

image

Source View:

image

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.