format list bullets with css

example how to format list bullets with css.

by s_light

HTML

<ul class="special_no">
    <li>hello</li>
</ul>
<ul class="special">
    <li>hello</li>
</ul>
<ul>
    <li>hello</li>
</ul>

CSS

body {
    color: rgb(0, 0, 0);
    text-shadow: 0 0 1px rgb(255, 255, 255), 0 0 2px rgb(255, 255, 255), 0 0 3px rgb(255, 255, 255), 0 0 6px rgb(255, 255, 255), 1px 1px 8px rgb(0, 0, 0);
    font-size: 25px;
}

ul {
    --ul_indentation: 2em;
    background-color: rgba(0, 0, 0, 0.1);
    overflow: visible;
    padding-left: var(--ul_indentation);
}

li {
    background-color: rgba(0, 0, 0, 0.1);
}

ul.special {
    list-style: none;
    background-color: rgba(255, 0, 0, 0.2);
}

ul.special li {
    position: relative;
}

ul.special li:before {
    content: '\2022\2009';
    position: absolute;
    left: calc(-1 * var(--ul_indentation));
    width: var(--ul_indentation);
    text-align: right;
    font-weight: 900;
    background-color: rgba(0, 0, 255, 0.2);
}

ul.special_no {
    list-style: none;
    background-color: rgba(0, 255, 0, 0.2);
}