Is there a way to increase the space between the number and the text of each <li>?
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.
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?
