Set width of ::marker

user_18010104 0
Viewed 75

Is it possible to increase the width of a ::marker for an ordered list in CSS?

A funny example for illustration:

ol {
  list-style-type: upper-roman;
}
<ol start="1998">
  <li>Line 1998</li>
</ol>

The numbers are cut, only the right part (CVII) is shown.

I could set a left margin for the ol element to fix the problem, but I would prefer a flexible width which uses exactly the needed space.

html-lists css
2 Answers

You can set list-style-position to inside, although that will lose the default alignment:

ol {
  list-style-type: upper-roman;
  list-style-position: inside;
}
<ol start="1998">
  <li>Line 1998</li>
  <li>Line 1999</li>
</ol>

Hacks can restore it, either with table layout:

ol {
  display: table;
}

li {
  counter-increment: list-item;
  display: table-row;
}

li::before {
  content: counter(list-item, upper-roman) ".\a0";
  display: table-cell;
  text-align: right;
}
<ol start="1998">
  <li>Line 1998</li>
  <li>Line 1999</li>
</ol>

or grid:

ol {
  display: grid;
  grid-template-columns: min-content auto;
}

li {
  display: contents;
}

li::before {
  counter-increment: list-item;
  content: counter(list-item, upper-roman) ".\a0";
  display: table-cell;
  text-align: right;
}
<ol start="1998">
  <li>Line 1998</li>
  <li>Line 1999</li>
</ol>

user_7071110

Setting up the width wouldn't help much as it would be the same for every element.

Your best bet is to use list-style-position: inside; the bullet points will be inside the list item. As it is part of the list item, it will be part of the text and push the text at the start.

There is a downside tough, if you have long lines, instead of having the second line of text indented on the start of the text, it will align with the start of the roman number. I have put both lists so you can see the difference, and bordered the list items to give better visuals on what exactly happens.

ol {
  list-style-type: upper-roman;
}
li{
  border:1px solid grey;}

.inside {
  list-style-position: inside;
}
<ol start="1998" class="inside">
  <li>Line 1998</li>
  <li>Line 1999</li>
  <li>Line 2000</li>
  <li>Line 2001: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et porta magna. Aliquam scelerisque lacus dolor, vel facilisis justo mattis eu. Nam non vehicula elit. Praesent in elit nisl. Nulla vulputate, nisi sed dignissim suscipit,
    lorem orci malesuada velit, sit amet placerat arcu eros id ex.</li>
</ol>

<ol start="1998">
  <li>Line 1998</li>
  <li>Line 1999</li>
  <li>Line 2000</li>
  <li>Line 2001: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et porta magna. Aliquam scelerisque lacus dolor, vel facilisis justo mattis eu. Nam non vehicula elit. Praesent in elit nisl. Nulla vulputate, nisi sed dignissim suscipit,
    lorem orci malesuada velit, sit amet placerat arcu eros id ex.</li>
</ol>

user_16201940
Related