Customize list item bullets using CSS

Question

Is it possible to change the size of an

element\'s bullet?

Take a look at the code below:

li {
    list-sty         


        

Answer 1

I just found a solution that I think works really well and gets around all of the pitfalls of custom symbols. The main problem with the li:before solution is that if list-items are longer than one line will not indent properly after the first line of text. By using text-indent with a negative padding we can circumvent that problem and have all the lines aligned properly:

ul{
    padding-left: 0; // remove default padding
}

li{
    list-style-type: none;  // remove default styles
    padding-left: 1.2em;    
    text-indent:-1.2em;     // remove padding on first line
}

li::before{
    margin-right:     0.5em; 
    width:            0.7em; // margin-right and width must add up to the negative indent-value set above
    height:           0.7em;

    display:          inline-block;
    vertical-align:   middle;
    border-radius: 50%;
    background-color: orange;
    content:          ' '
}