Question
Is there a way to increase the space between the number and the text of each <li>
?
Answer
Yes there is a way to do this! We can use CSS to target the <li>
elements and then apply some left padding to them. This will nudge the text to the right, away from the numbers. To learn more about how to change the look of our pages, check out our Learn CSS course.
28 Likes
Conversely, is there a way to decrease the space between the number (or marker) and the text of each <li>
?
Negative values given to padding
and border
attributes don’t seem to work, while negative values for margin
and position
-related (e.g. left
)* attributes shift the list item together with the number/marker.
*changed the spelling from “(i.e. left
)” to “(e.g. left
)”
There are 4 styles to change the position. left
, right
, top
and bottom
you can use.
That is right. My question was whether there is a way where we can reduce the space between the marker of a list item (li
) element and the text (or the content) of the li
element. As giving negative values to the left
attribute, for example, shifts both the text/content of the li
element and also shifts the marker of the li
element, so then is there a way to move only the text/content of the li
element, but not move the marker?
From inspecting the page code, I see that the browser inserts a ::marker
element nested inside the li
element and right after the opening <li>
tag, but it seems that its margin (and/or position) can’t be changed.
Since the left
and right
propities are oppisets what do you think you would use to move it closer?
Well here’s what I tried:
I have this code:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul>
<li>item1</li>
<li>item2</li>
</ul>
</body>
</html>
This is what it displays (along with inspecting the code):
This is my first try to move the item1
and item2
texts closer to the disc markers:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul>
<li>item1</li>
<li>item2</li>
</ul>
<style>
li {
position: relative;
left: -10px;
}
</style>
</body>
</html>
This is the result (it shifts both the (item1
and item2
) texts of the li
and the disc maker to the left, but I want only the texts to move and the disc marker to remain in the same place as it was before):
Now my next try is to throw everything I know at the marker
:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul>
<li>item1</li>
<li>item2</li>
</ul>
<style>
li {
position: relative;
left: -10px;
}
::marker {
position: relative;
right: -10px;
}
li ::marker {
position: relative;
right: -10px;
}
li>::marker {
position: relative;
right: -10px;
}
li::marker {
position: relative;
right: -10px;
}
</style>
</body>
</html>
But nothing changes:
Why doesn’t the marker move to the right?
Am I doing something wrong?
Does this code behave the same way for you?
Can there be something done so that the marker moves to the right (or the text moves to the left without the marker also moving to the left)? If so, what?