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

Question

My HTML first:

    
More from Travelandleisure.com

        


        

Answer 1

I am buliding up on Kolja's answer, to explain how viewBox works

The viewBox is a coordinate system.

Syntax: viewBox="posX posY width height"

viewBox="0 0 4 4" will create this coordinate system:

The yellow area is the visible area.

So if you like to center something in it, then you need to use viewBox='-2 -2 4 4'

I know it looks completly retarded and I also don't understand why they designed it this way...

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

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

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

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

Centered Circle (viewBox Method) [viewBox='-2 -2 4 4', circle r='1']:


  
foo
  
bar
  
baz


Decrease Circle Radius [viewBox='-2 -2 4 4', circle r='.5']:


  
foo
  
bar
  
baz


Move Circle Closer to Text [viewBox='-3 -2 4 4', circle r='.5']:


  
foo
  
bar
  
baz


...even closer (use float values) [viewBox='-3.5 -2 4 4', circle r='.5']:


  
foo
  
bar
  
baz

But there is a much easier method, you can just use the circles cx and cy attributes.

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

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

Centered Circle (cx/xy) Radius 20 [viewBox='0 0 100 100', circle cx='50%' cy='50%' r='20']:


  
foo
  
bar
  
baz


Centered Circle (cx/xy) Radius 10 [viewBox='0 0 100 100', circle cx='50%' cy='50%' r='10']:


  
foo
  
bar
  
baz