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

Question

My HTML first    lt ul class  moreLinks   gt       lt div gt More from Travelandleisure com lt  div gt            lt li gt  lt a rel  nofollow  href    gt xyz1 lt  a gt  lt  li gt       lt li gt  lt a rel  nofollow  href    gt xyz1 lt  a gt  lt  li gt       lt li gt  lt a rel  nofollow  href    gt xyz1 lt  a gt  lt  li gt   lt  ul gt    I know that I can apply font-size on li very small so that disc look correct to me and then apply css to  a  inside li  But I do not know why this is not working on the site I am working  I cannot control the html directly    I saw that when I make this    farParentDiv ul li       list-style  disc inside none      TO this    farParentDiv ul li       list-style-type  disc      font-size 10px      and now after applying font-size to  a   it works in Firebug  but from my css file  I tried a lot but tired  I can overwrite the above this in css file but cannot change it directly as I did in firebug   Please write what can be the problem   I used to put dots     just before link inside  and then apply css on that to control the disc size  but as I said  I cannot control the HTML

User · Answer

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

_x000D_

ul {_x000D_
  list-style-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='-1 -1 2 2'><circle r='1' /></svg>");_x000D_
}_x000D_
_x000D_
.x {_x000D_
  list-style-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='-1 -1 2 2'><circle r='0.5' /></svg>");_x000D_
}_x000D_
_x000D_
.x_alternative {_x000D_
  list-style-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='-2.2 -2.4 4 4'><circle r='1' /></svg>");_x000D_
}

_x000D_

<ul>_x000D_
  <li>foo</li>_x000D_
  <li>bar</li>_x000D_
  <li>baz</li>_x000D_
</ul>_x000D_
_x000D_
<ul class="x">_x000D_
  <li>foo</li>_x000D_
  <li>bar</li>_x000D_
  <li>baz</li>_x000D_
</ul>_x000D_
_x000D_
<ul class="x_alternative">_x000D_
  <li>foo</li>_x000D_
  <li>bar</li>_x000D_
  <li>baz</li>_x000D_
</ul>

_x000D_

Click here for an easy explanation of the viewBox.

User · Answer

try to use diffrent font-size for li and a   farParentDiv ul li      list-style-type  disc     font-size 20px      farParentDiv ul li a      font-size 10px      this saved me from using images

User · Answer

You can also use 2D transform  It is illustrated in the snippet below with a list being scaled by 25       Nota  Bootstrap is used here for the sole purpose of layouting the demo  before after effect        x000D   x000D  ul before   x000D    x000D   x000D  ul after   x000D    transform  scale 1 25   x000D    x000D   x000D  div container  div row   x000D    padding  20px  x000D    x000D   x000D  ul   x000D    border  6px solid  000000  x000D    x000D   lt  -- Bootstrap CSS -- gt  x000D   lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 3 3 6 css bootstrap min css  integrity  sha384-1q8mTJOASx8j1Au a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7  crossorigin  anonymous  gt  x000D   x000D   lt  -- Bootstrap theme -- gt  x000D   lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 3 3 6 css bootstrap-theme min css  integrity  sha384-fLW2N01lMqjakBkx3l M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV 0En5r  crossorigin  anonymous  gt  x000D   x000D   lt  -- HTML -- gt  x000D   lt div class  container  gt  x000D     lt div class  row  gt  x000D       lt div class  col-xs-5  gt  x000D        Before x000D       lt  div gt  x000D       lt div class  col-xs-5 col-xs-offset-1  gt  x000D        After  scale 25   x000D       lt  div gt  x000D     lt  div gt  x000D   x000D     lt div class  row  gt  x000D       lt div class  col-xs-5  gt  x000D         lt ul id  before  gt  x000D           lt li gt Lorem ipsum dolor sit amet    lt  li gt  x000D           lt li gt In vel ante vel est accumsan    lt  li gt  x000D           lt li gt In elementum libero vel    lt  li gt  x000D           lt li gt Nam ut ante a sem mattis    lt  li gt  x000D           lt li gt Curabitur fermentum nisl    lt  li gt  x000D           lt li gt Praesent vel risus ultrices    lt  li gt  x000D         lt  ul gt  x000D       lt  div gt  x000D       lt div class  col-xs-5 col-xs-offset-1  gt  x000D         lt ul id  after  gt  x000D           lt li gt Lorem ipsum dolor sit amet    lt  li gt  x000D           lt li gt In vel ante vel est accumsan    lt  li gt  x000D           lt li gt In elementum libero vel    lt  li gt  x000D           lt li gt Nam ut ante a sem mattis    lt  li gt  x000D           lt li gt Curabitur fermentum nisl    lt  li gt  x000D           lt li gt Praesent vel risus ultrices    lt  li gt  x000D         lt  ul gt  x000D       lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   lt  -- JQuery -- gt  x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   x000D   lt  -- Bootstrap JS -- gt  x000D   lt script src  https   maxcdn bootstrapcdn com bootstrap 3 3 6 js bootstrap min js  integrity  sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS  crossorigin  anonymous  gt  lt  script gt  x000D   x000D   x000D    Reference    CSS3 2D transform  compatibility matrix

User · Answer

Apart from using custom images for bullets  you can also style the ul or li elements one way and then style the contents differently  as seen here   The benefit is the lack of images for one thing  and also the added control  The disadvantage is that it tends to involve non-semantic markup  except in this case where the anchors are required already

User · Answer

I am buliding up on Kolja s answer  to explain how viewBox works The viewBox is a coordinate system  Syntax  viewBox  quot posX posY width height quot  viewBox  quot 0 0 4 4 quot  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     x000D   x000D  ul     list-style-image  url  data image svg xml utf8  lt svg xmlns  http   www w3 org 2000 svg  width  10  height  10  viewBox  -2 -2 4 4  gt  lt circle r  1    gt  lt  svg gt         x     list-style-image  url  data image svg xml utf8  lt svg xmlns  http   www w3 org 2000 svg  width  10  height  10  viewBox  -2 -2 4 4  gt  lt circle r   5    gt  lt  svg gt         y     list-style-image  url  data image svg xml utf8  lt svg xmlns  http   www w3 org 2000 svg  width  10  height  10  viewBox  -3 -2 4 4  gt  lt circle r   5    gt  lt  svg gt         z     list-style-image  url  data image svg xml utf8  lt svg xmlns  http   www w3 org 2000 svg  width  10  height  10  viewBox  -3 5 -2 4 4  gt  lt circle r   5    gt  lt  svg gt       x000D  Centered Circle  viewBox Method   viewBox  -2 -2 4 4   circle r  1      lt ul gt     lt li gt foo lt  li gt     lt li gt bar lt  li gt     lt li gt baz lt  li gt   lt  ul gt   Decrease Circle Radius  viewBox  -2 -2 4 4   circle r   5      lt ul class  x  gt     lt li gt foo lt  li gt     lt li gt bar lt  li gt     lt li gt baz lt  li gt   lt  ul gt   Move Circle Closer to Text  viewBox  -3 -2 4 4   circle r   5      lt ul class  y  gt     lt li gt foo lt  li gt     lt li gt bar lt  li gt     lt li gt baz lt  li gt   lt  ul gt      even closer  use float values   viewBox  -3 5 -2 4 4   circle r   5      lt ul class  z  gt     lt li gt foo lt  li gt     lt li gt bar lt  li gt     lt li gt baz lt  li gt   lt  ul gt  x000D   x000D   x000D   But there is a much easier method  you can just use the circles cx and cy attributes   x000D   x000D   centered     list-style-image  url  data image svg xml utf8  lt svg xmlns  http   www w3 org 2000 svg  width  10  height  10  viewBox  0 0 100 100  gt  lt circle cx  50   cy  50   r  20    gt  lt  svg gt         x     list-style-image  url  data image svg xml utf8  lt svg xmlns  http   www w3 org 2000 svg  width  10  height  10  viewBox  0 0 100 100  gt  lt circle cx  50   cy  50   r  10    gt  lt  svg gt       x000D  Centered Circle  cx xy  Radius 20  viewBox  0 0 100 100   circle cx  50   cy  50   r  20      lt ul class  centered a  gt     lt li gt foo lt  li gt     lt li gt bar lt  li gt     lt li gt baz lt  li gt   lt  ul gt   Centered Circle  cx xy  Radius 10  viewBox  0 0 100 100   circle cx  50   cy  50   r  10      lt ul class  x  gt     lt li gt foo lt  li gt     lt li gt bar lt  li gt     lt li gt baz lt  li gt   lt  ul gt  x000D   x000D   x000D

User · Answer

Easiest way for me is to use Unicode Characters and then style them with span tags  I m going to use inline css for the sake of the example  but you can do it whatever way you prefer   eg  When I want to use a square bullet and control its color and size    lt li style  list-style none   gt  lt a href    gt  lt span style  font-size x-small vertical-align middle   gt  amp  9608  lt  span gt  amp nbsp  amp nbsp HOME lt  a gt  lt  li gt    You can find lots of unicode bullets here   http   unicode-table com   I do this because linking images for bullets seems a little unnecessary to me

User · Answer

I have always had good luck with using background images instead of trusting all browsers to interpret the bullet in exactly the same way  This would also give you tight control over the size of the bullet    moreLinks li       background  url  bullet gif   no-repeat left 5px      padding-left  1em      Also  you may want to move your DIV outside of the UL  It s invalid markup as you have it now  You can use a list header LH if you must have it inside the list

User · Answer

I think by using the content     The dot becomes too squared if made too big  thus I believe that this is a better solution  here you can decide the size of the  disc  without affecting the font size    x000D   x000D  li   x000D      list-style  none  x000D     display  list-item  x000D     margin-left  50px  x000D    x000D   x000D  li before   x000D      content      x000D     border  5px  000 solid  important  x000D     border-radius  50px  x000D     margin-top  5px  x000D     margin-left  -20px  x000D     position  absolute  x000D    x000D   lt h2 gt Look at these examples  lt  h2 gt  x000D   lt li gt This is an example lt  li gt  x000D   lt li gt This is another example lt  li gt  x000D   x000D   x000D    You edit the size of the disk by editing the size of the border px  and you can adjust the distance to the text by how much - margin left you give it  As well as adjust the y position by editing the margin top

User · Answer

Since I don t know how to control only the list marker size with CSS and no one s offered this yet  you can use  before content to generate the bullets  li       list-style  none      font-size  20px     li before       content  quot    quot       font-size 120px      vertical-align middle      line-height 20px     Demo  http   jsfiddle net 4wDL5  The markers are limited to appearing  quot inside quot  with this particular CSS  although you could change it  It s definitely not the best option  browser must support generated content  so no IE6 or 7   but it might be the easiest - plus you can choose any character you want for the marker  If you go the image route  see list-style-image

User · Answer

I m surprised that no one has mentioned the list-style-image property  ul       list-style-image  url  images ico-list-bullet png

User · Answer

In modern browsers you can use the   marker CSS pseudo-element like this   farParentDiv ul li  marker     font-size  0 8em     For browser support  please refer to  Can I Use   marker pseudo-element

User · Answer

Instead of using position  absolute  text-indent can be used to solve the  inside  problem   li       list-style  inherit      margin  0 0 4px 9px      text-indent  -9px    li before       content             http   jsfiddle net poselab zEMLG

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

Examples related to css