Customize list item bullets using CSS

Is it possibl开发者_Python百科e to change the size of an <li> element's bullet?

Take a look at the code below:

li {
    list-style: square; /* I want to change the size of this squared bullet. */
}

I can't seem to find any way to achieve that.

You mean altering the size of the bullet, I assume? I believe this is tied to the font-size of the li tag. Thus, you can blow up the font-size for the LI, then reduce it for an element contained inside. Kind of sucks to add the extra markup - but something like:

li {font-size:omgHuge;}
li span {font-size:mehNormal;}

Alternately, you can specify an image file for your list bullets, that could be as big as you want:

ul{
  list-style: square url("38specialPlusP.gif");
 }

See: http://www.w3schools.com/css/css_list.asp

_{Based on @dzimney answer and similar to @Crisman answer (but different)}

That answer is good but has indention issue (bullets appear inside of li scope). Probably you don't want this. See simple example list below (this is a default HTML list):

• Lorem ipsum dolor sit amet, ei cum offendit partiendo iudicabit. At mei quaestio honestatis, duo dicit affert persecuti ei. Etiam nusquam cu his, nec alterum posidonium philosophia te. Nec an purto iudicabit, no vix quod clita expetendis.

• Quem suscipiantur no eos, sed impedit explicari ea, falli inermis comprehensam est in. Vide dicunt ancillae cum te, habeo delenit deserunt mei in. Tale sint ex his, ipsum essent appellantur et cum.

But if you use the mentioned answer the list will be like below (ignoring the size of the bullets):

• Lorem ipsum dolor sit amet, ei cum offendit partiendo iudicabit. At mei quaestio honestatis, duo dicit affert persecuti ei. Etiam nusquam cu his, nec alterum posidonium philosophia te. Nec an purto iudicabit, no vix quod clita expetendis.

• Quem suscipiantur no eos, sed impedit explicari ea, falli inermis comprehensam est in. Vide dicunt ancillae cum te, habeo delenit deserunt mei in. Tale sint ex his, ipsum essent appellantur et cum.

So I recommend this approach that resolves the issue:

li {
    list-style-type: none;
    position: relative;    /* It's needed for setting position to absolute in the next rule. */
}

li::before {
    content: '■';
    position: absolute;
    left: -0.8em;          /* Adjust this value so that it appears where you want. */
    font-size: 1.1em;      /* Adjust this value so that it appears what size you want. */
}

<ul>
    <li>Lorem ipsum dolor sit amet, ei cum offendit partiendo iudicabit. At mei quaestio honestatis, duo dicit affert persecuti ei. Etiam nusquam cu his, nec alterum posidonium philosophia te. Nec an purto iudicabit, no vix quod clita expetendis.</li>
    <li>Quem suscipiantur no eos, sed impedit explicari ea, falli inermis comprehensam est in. Vide dicunt ancillae cum te, habeo delenit deserunt mei in. Tale sint ex his, ipsum essent appellantur et cum.</li>
</ul>

You can wrap the contents of the li in another element such as a span. Then, give the li a larger font-size, and set a normal font-size back on the span:

http://jsfiddle.net/RZr2r/

li {
    font-size: 36px;
}
li span {
    font-size: 18px;
}
<ul>
    <li><span>Item 1</span></li>
    <li><span>Item 2</span></li>
    <li><span>Item 3</span></li>
</ul>

Depending on the level of IE support needed, you could also use the :before selector with the bullet style set as the content property.

li {  
  list-style-type: none;
  font-size: small;
}

li:before {
  content: '\2022';
  font-size: x-large;
}

You may have to look up the HTML ASCII for the bullet style you want and use a converter for CSS Hex value.

You can use the ::marker CSS pseudo-element to style the number or bullet of a list. Currently, January 2022, Safari support is limited to color and font-size.

Example:

::marker {
  color: red;
  font-size: 2rem
}

ul > li::marker {
  color: blue;
}

ol > li::marker {
  font-size: 1rem
}

<ul>
  <li>Step One</li>
  <li>Step Two</li>
  <li>Step Three</li>
</ul>
 
<ol>
  <li>Wake up</li>
  <li>Code</li>
  <li>Sleep</li>
</ol>

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:          ' '
}

<ul>
  <li>first element</li>
  <li>second element</li>
</ul>

No markup changes needed

I assume you mean the size of the bullet at the start of each list item. If that's the case, you can use an image instead of it:

list-style-image:url('bigger.gif');
list-style-type:none;

If you meant the actual size of the li element, then you can change that as normal with width and height.

In case you do not want to wrap the content in your <li>s with <span>s, you can also use :before like this:

ul {
  list-style: none;
  }
li {
  position: relative;
  padding-left: 15px;
  line-height: 16px;
}
li:before {
  content: '\2022';
  line-height: 16px; /*match the li line-height for vertical centered bullets*/
  position: absolute;
  left: 0;
}
li.huge:before {
  font-size: 30px;
}

li.small:before {
  font-size: 10px;
}

Adjust your font sizes on the :before to whatever you would like.

<ul>
  <li class="huge">huge bullet</li>
  <li class="small">smaller bullet</li>
  <li class="huge">multi line item with custom<br/> sized bullet</li>
  <li>normal bullet</li>
</ul>

Use the Free Unicode Icons, Symbols, & Emoticons Built into Browsers Instead!

You dont need all those custom fonts, links to files, CDN's, Bootstrap tricks, Font-Awesome, or even JavaScript! There are THOUSANDS OF ICONS built into browsers that are free to use as bullets in your CSS just by typing a small number into your code. Its called UNICODE!

Here is a Unicode version. This one allows you to drop in any text symbol or emoticon you like into your CSS bullet list. All you need is the Unicode "code point" value which is free...and there are thousands of icons native to modern browsers!! Just search for unicode code points and paste whatever icon you need into your CSS as so...

<style>
#html_list{
    position: relative;
    margin-left: 1em;
    list-style: none;
}
#html_list li::before {
    display: inline-block;
    content: "\2023";/* <<< ADD YOUR UNICODE ICON NUMBER HERE */
    color: #114f66;
    font-size: 3rem;
    line-height: 0;
    padding: 0 .1em 0 0;
    margin: 0;
    text-align: left;
    vertical-align: top;
    position: relative;
    top: .2em;
    left: 0em;
}
#html_list li {
    text-align:left;
    vertical-align: top;
    padding: .2em 0em .2em 0em;
    margin: 0;
    font-size: 1rem;
}
</style>

<ul id="html_list">
    <li><a href="#">Area 1</a></li>
    <li><a href="#">Area 2</a></li>
    <li><a href="#">Area 3</a></li>
</ul>

The main problem in using Unicode or text symbols in lists is resizing. Even after you have stripped away height, line-height, padding, and margins, the symbol has spacing after resizing it using font-size. Most of this is based on the font you choose. Be careful and pick a font-face in CSS that has a range of Unicode glyphs.

I've designed the best possible solution above that keeps the Unicode bullet text and its style separate from the rest of the list text using a pseudo-element. This idea allows you to remove the default list-style bullet in the parent unordered list, insert a new Unicode bullet into a ::before pseudo-element. You can then resize and reposition it as you like. Once you have lined up your sized bullets with the list text, you can then start padding or sizing your list text as you need and the bullets should move with it.

<ul>
    <li id="bigger"></li>
    <li></li>
    <li></li>
  </ul>

  <style>
     #bigger .li {height:##px; width:##px;}
  </style>

You have to use an image to change the actual size or form of the bullet itself:

You can use a background image with appropriate padding to nudge content so it doesn't overlap:

list-style-image:url(bigger.gif);

or

background-image: url(images/bullet.gif);

If you wrap your <li> content in a <span> or other tag, you may change the font size of the <li>, which will change the size of the bullet, then reset the content of the <li> to its original size. You may use em units to resize the <li> bullet proportionally.

For example:

<ul>
    <li><span>First item</span></li>
    <li><span>Second item</span></li>
</ul>

Then CSS:

li {
    list-style-type: disc;
    font-size: 0.8em;
}

li * {
    font-size: initial;
}

A more complex example:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>List Item Bullet Size</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
ul.disc li {
    list-style-type: disc;
    font-size: 1.5em;
}

ul.square li {
    list-style-type: square;
    font-size: 0.8em;
}

li * {
    font-size: initial;
}
    </style>
</head>
<body>

<h1>First</h1>
<ul class="disc">
    <li><span>First item</span></li>
    <li><span>Second item</span></li>
</ul>

<h1>Second</h1>
<ul class="square">
    <li><span>First item</span></li>
    <li><span>Second item</span></li>
</ul>

</body>
</html>

Results in:

I just found a solution that I think works really well and gets around all of the pitfalls of custom symbols. The main problem with the li:before solution is that if list-items are longer than one line will not indent properly after the first line of text. By using text-indent with a negative padding we can circumvent that problem and have all the lines aligned properly:

ul{
    padding-left: 0; // remove default padding
}

li{
    list-style-type: none;  // remove default styles
    padding-left: 1.2em;    
    text-indent:-1.2em;     // remove padding on first line
}

li::before{
    margin-right:     0.5em; 
    width:            0.7em; // margin-right and width must add up to the negative indent-value set above
    height:           0.7em;

    display:          inline-block;
    vertical-align:   middle;
    border-radius: 50%;
    background-color: orange;
    content:          ' '
}

This method moves the disc out of the text flow where the original disc was, but is adjustable.

ul{
    list-style-type: none;
    
    li{ 
        position: relative;
      }
    li:before {
        position: absolute;
        top: .1rem;
        left: -.8em;
        content: '\2022';
        font-size: 1.2rem;
    }
}

Haven't seen this technique mentioned. It basically allows you to have a "dot" any size you want. It uses a round border to draw a circle.

li {
    list-style-type: none;
    position: relative;
    margin-left: 2.5rem;
}

li:before {
    content: " ";
    border: 1rem solid #1b1b1b;
    border-radius: 99rem;
    height: 0; /* it's all controlled by the border */
    width: 0;
    margin-top: -0.4rem;
    margin-left:  -2.5rem;
    position: absolute;
}

Things have obviously changed a little since 2011. Today CSS offers two simple and well-supported ways of customising the bullets in an unordered list.

The most recent one is the ::marker pseudo-element. It allows you to apply styles directly to any marker, be it a bullet or a number. See Robert Kegel's answer for a more detailed description of that.

The other method is deceptively simple. You just set the list-style-type property on your ul to a quoted string and choose whatever Unicode character tickles your fancy. In this example, I've chosen character U+25A0 (Black Square), which is bigger than the standard square bullet:

ul {
  list-style-type: square;
}
ul.big-bullets {
  list-style-type: "■  ";
}

<ul class="big-bullets">
  <li>Check out my square bullets!</li>
  <li>They are big, and perfectly aligned.</li>
  <li>And all it took was one very simple line of CSS.</li>
</ul>
<ul>
  <li>They <em>are</em> big bullets.</li>
  <li>I'm a little jealous.</li>
</ul>

The ability to set a string on the list-style-type property has been around for many years, but browser support took a while to catch up. It's now over 92% according to Can I use.

Now, you may be thinking you'd rather just apply a font-size than delve into obscure Unicode characters, and in that case, you'd go for the ::marker method. But keep in mind, those bullet characters are only designed to line up nicely when used at the same font size as the rest of the text. IMHO, choosing the right bullet character in the first place is the way to go. If you want more fine-grained control, you can, of course, use both techniques together.

you just need to add ::marker after your li tag like so

ul li::marker{
font-size:2px;
}

and done.