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,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='-1 -1 2 2'><circle r='1' /></svg>");
}

.x {
  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>");
}

.x_alternative {
  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>");
}

<ul>
  <li>foo</li>
  <li>bar</li>
  <li>baz</li>
</ul>

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

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

Click here for an easy explanation of the viewBox.

Answer 2

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).

---

ul#before {
}

ul#after {
  transform: scale(1.25);
}

div.container, div.row {
  padding: 20px;
}

ul {
  border: 6px solid #000000;
}

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Bootstrap theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- HTML -->
<div class="container">
  <div class="row">
    <div class="col-xs-5">
      Before
    </div>
    <div class="col-xs-5 col-xs-offset-1">
      After (scale 25%)
    </div>
  </div>

  <div class="row">
    <div class="col-xs-5">
      <ul id="before">
        <li>Lorem ipsum dolor sit amet...</li>
        <li>In vel ante vel est accumsan...</li>
        <li>In elementum libero vel...</li>
        <li>Nam ut ante a sem mattis...</li>
        <li>Curabitur fermentum nisl...</li>
        <li>Praesent vel risus ultrices...</li>
      </ul>
    </div>
    <div class="col-xs-5 col-xs-offset-1">
      <ul id="after">
        <li>Lorem ipsum dolor sit amet...</li>
        <li>In vel ante vel est accumsan...</li>
        <li>In elementum libero vel...</li>
        <li>Nam ut ante a sem mattis...</li>
        <li>Curabitur fermentum nisl...</li>
        <li>Praesent vel risus ultrices...</li>
      </ul>
    </div>
  </div>
</div>

<!-- JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Bootstrap JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

Reference:

• CSS3 2D transform: compatibility matrix

Answer 3

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

Answer 4

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.

Answer 5

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,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='-2 -2 4 4'><circle r='1' /></svg>");
}

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

.y {
  list-style-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='-3 -2 4 4'><circle r='.5' /></svg>");
}

.z {
  list-style-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='-3.5 -2 4 4'><circle r='.5' /></svg>");
}

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

<ul>
  <li>foo</li>
  <li>bar</li>
  <li>baz</li>
</ul>

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

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

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

<ul class="y">
  <li>foo</li>
  <li>bar</li>
  <li>baz</li>
</ul>

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

<ul class="z">
  <li>foo</li>
  <li>bar</li>
  <li>baz</li>
</ul>

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,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 100 100'><circle cx='50%' cy='50%' r='20' /></svg>");
}

.x {
  list-style-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 100 100'><circle cx='50%' cy='50%' r='10' /></svg>");
}

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

<ul class="centered_a">
  <li>foo</li>
  <li>bar</li>
  <li>baz</li>
</ul>

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

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

Answer 6

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:

<li style="list-style:none;"><a href=""><span style="font-size:x-small;vertical-align:middle;">&#9608;</span>&nbsp;&nbsp;HOME</a></li>

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.