Is it possible 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.
This question is related to
css
size
html-lists
listitem
The answer is
Based on @dzimney answer and similar to @Crisman answer (but different)
That answer is good but has indention problem (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 {_x000D_
list-style-type: none;_x000D_
position: relative; /* It's needed for setting position to absolute in the next rule. */_x000D_
}_x000D_
_x000D_
li::before {_x000D_
content: '¦';_x000D_
position: absolute;_x000D_
left: -0.8em; /* Adjust this value so that it appears where you want. */_x000D_
font-size: 1.1em; /* Adjust this value so that it appears what size you want. */_x000D_
}<ul>_x000D_
<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>_x000D_
<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>_x000D_
</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.
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:
<ul>
<li id="bigger"></li>
<li></li>
<li></li>
</ul>
<style>
#bigger .li {height:##px; width:##px;}
</style>
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>
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.
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:
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>
Another way of changing the size of the bullets would be:
- Disabling the bullets altogether
- Re-adding the custom bullets with the help of
::beforepseudo-element.
Example:
ul {_x000D_
list-style-type: none;_x000D_
}_x000D_
_x000D_
li::before {_x000D_
display: inline-block;_x000D_
vertical-align: middle;_x000D_
width: 5px;_x000D_
height: 5px;_x000D_
background-color: #000000;_x000D_
margin-right: 8px;_x000D_
content: ' '_x000D_
}<ul>_x000D_
<li>first element</li>_x000D_
<li>second element</li>_x000D_
</ul>No markup changes needed
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;
}
}
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);
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: ' '
}
Source: Stackoverflow.com