CSS: Control space between bullet and <li>
I'd like to control how much horizontal space a bullet pushes its <li>
to the right in an <ol>
or <ul>
.
That is, instead of always having
* Some list text goes
here.
I'd like to be able to change that to be
* Some list text goes
here.
or
*Some list text goes
here.
I looked around but could only find instructions for shifting the entire block left or right, for example, http://www.alistapart.com/articles/taminglists/
Put its content in a span
which is relatively positioned, then you can control the space by the left
property of the span
.
li span {
position: relative;
left: -10px;
}
<ul>
<li><span>item 1</span></li>
<li><span>item 2</span></li>
<li><span>item 3</span></li>
</ul>
To summarise the other answers here – if you want finer control over the space between bullets and the text in a <li>
list item, your options are:
(1) Use a background image:
<style type="text/css">
li {
list-style-type:none;
background-image:url(bullet.png);
}
</style>
<ul>
<li>Some text</li>
</ul>
Advantages:
- You can use any image you want for the bullet
- You can use CSS
background-position
to position the image pretty much anywhere you want in relation to the text, using pixels, ems or %
Disadvantages:
- Adds an extra (albeit small) image file to your page, increasing the page weight
- If a user increases the text size on their browser, the bullet will stay at the original size. It'll also likely get further out of position as the text size increases
- If you're developing a 'responsive' layout using only percentages for widths, it could be difficult to get the bullet exactly where you want it over a range of screen widths
2. Use padding on the <li>
tag
<style type="text/css">
ul {padding-left:1em}
li {padding-left:1em}
</style>
<ul>
<li>Some text</li>
</ul>
Advantages:
- No image = 1 less file to download
- By adjusting the padding on the
<li>
, you can add as much extra horizontal space between the bullet and the text as you like - If the user increases the text size, the spacing and bullet size should scale proportionally
Disadvantages:
- Can't move the bullet any closer to the text than the browser default
- Limited to shapes and sizes of CSS's built-in bullet types
- Bullet must be same colour as the text
- No control over vertical positioning of the bullet
(3) Wrap the text in an extra <span>
element
<style type="text/css">
li {
padding-left:1em;
color:#f00; /* red bullet */
}
li span {
display:block;
margin-left:-0.5em;
color:#000; /* black text */
}
</style>
<ul>
<li><span>Some text</span></li>
</ul>
Advantages:
- No image = 1 less file to download
- You get more control over the position of the bullet than with option (2) – you can move it closer to the text (although despite my best efforts it seems you can't alter the vertical position by adding
padding-top
to the<span>
. Someone else may have a workaround for this, though...) - The bullet can be a different colour to the text
- If the user increases their text size, the bullet should scale in proportion (providing you set the padding & margin in ems not px)
Disadvantages:
- Requires an extra unsemantic element (this will probably lose you more friends on SO than it will in real life ;) but it's annoying for those who like their code to be as lean and efficient as possible, and it violates the separation of presentation and content that HTML / CSS is supposed to offer)
- No control over the size and shape of the bullet
Here's hoping for some new list-style features in CSS4, so we can create smarter bullets without resorting to images or exta mark-up :)
This should do it. Be sure to set your bullets to the outside. you can also use CSS pseudo elements if you can drop them in IE7 downward. I don't really recommend using pseudo elements for this kinda thing but it does work to control distance.
ul {
list-style: circle outside;
width: 100px;
}
li {
padding-left: 40px;
}
.pseudo,
.pseudo ul {
list-style: none;
}
.pseudo li {
position: relative;
}
/* use ISO 10646 for content http://la.remifa.so/unicode/named-entities.html */
.pseudo li:before {
content: '\2192';
position: absolute;
left: 0;
}
<ul>
<li>Any Browser really</li>
<li>List item
<ul>
<li>List item</li>
<li>List item</li>
</ul>
</li>
</ul>
<ul class="pseudo">
<li>IE8+ only</li>
<li>List item
<ul>
<li>List item with two lines of text for the example.</li>
<li>List item</li>
</ul>
</li>
</ul>
Old question, but the :before pseudo element works well here.
<style>
li:before {
content: "";
display: inline-block;
height: 1rem; // or px or em or whatever
width: .5rem; // or whatever space you want
}
</style>
It works really well and doesn't require many extra rules or html.
<ul>
<li>Some content</li>
<li>Some other content</li>
</ul>
Cheers!
For list-style-type: inline:
It's almost the same like DSMann8's answer but less css code.
You just need to
<style>
li:before {
content: "";
padding-left: 10px;
}
</style>
<ul>
<li>Some content</li>
</ul>
Cheers