How to control size of list-style-type disc in CSS?

Question

My HTML first:

    
More from Travelandleisure.com

        


        

Answer 1

If you choose to use inline SVG to render your bullets, you can use width and height properties to control their size:

ul {
  list-style-image: url("data:image/svg+xml;utf8,");
}

.x {
  list-style-image: url("data:image/svg+xml;utf8,");
}

.x_alternative {
  list-style-image: url("data:image/svg+xml;utf8,");
}

  
foo
  
bar
  
baz



  
foo
  
bar
  
baz



  
foo
  
bar
  
baz

Click here for an easy explanation of the viewBox.