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

Another way of changing the size of the bullets would be:

1. Disabling the bullets altogether
2. Re-adding the custom bullets with the help of ::before pseudo-element.

Example:

ul {
  list-style-type: none;
}

li::before {
  display:          inline-block;
  vertical-align:   middle;
  width:            5px;
  height:           5px;
  background-color: #000000;
  margin-right:     8px;
  content:          ' '
}

  
first element
  
second element

No markup changes needed