Skip to main content
The 2026 Annual Developer Survey is live— take the Survey today!

Return to Answer

Post Timeline

deleted 2 characters in body
Source Link
Johannes Green
Johannes Green

A solution to control the space between numeral and text with respect to widest marking.

Tip: edit the last 'text-align' to get 'inside''inside or 'outside''outside effect. You can remove 'upper-roman' for standard numeral.

ol {
  counter-reset: n;
  display: table-row;
  text-align: left;
}
li {
  counter-increment: n;
  display: table-row;
  text-align: left;
}
li::before {
  content: counter(n, upper-roman) ".";
  display: table-cell;
  padding-right: 1rem;
  text-align: left;
}
<ol>
  <li>test1</li>
  <li>test2</li>
  <li>test3</li>
</ol>

A solution to control the space between numeral and text with respect to widest marking.

Tip: edit the last 'text-align' to get 'inside' or 'outside' effect. You can remove 'upper-roman' for standard numeral.

ol {
  counter-reset: n;
  display: table-row;
  text-align: left;
}
li {
  counter-increment: n;
  display: table-row;
  text-align: left;
}
li::before {
  content: counter(n, upper-roman) ".";
  display: table-cell;
  padding-right: 1rem;
  text-align: left;
}
<ol>
  <li>test1</li>
  <li>test2</li>
  <li>test3</li>
</ol>

A solution to control the space between numeral and text with respect to widest marking.

Tip: edit the last 'text-align' to get 'inside or 'outside effect. You can remove 'upper-roman' for standard numeral.

ol {
  counter-reset: n;
  display: table-row;
  text-align: left;
}
li {
  counter-increment: n;
  display: table-row;
  text-align: left;
}
li::before {
  content: counter(n, upper-roman) ".";
  display: table-cell;
  padding-right: 1rem;
  text-align: left;
}
<ol>
  <li>test1</li>
  <li>test2</li>
  <li>test3</li>
</ol>

added 102 characters in body
Source Link
Johannes Green
Johannes Green

A solution to control the space between numeralsnumeral and text when you want to use 'inside' with respect to widest (bonus roman numerals)marking.

Tip: edit the last 'text-align' to get 'inside' or 'outside' effect. You can remove 'upper-roman' for standard numeral.

ol {
  counter-reset: n;
  display: table-row;
  text-align: left;
}
li {
  counter-increment: n;
  display: table-row;
  text-align: left;
}
li::before {
  content: counter(n, upper-roman) ".";
  display: table-cell;
  padding-right: 1rem;
  text-align: left;
}
<ol>
  <li>test1</li>
  <li>test2</li>
  <li>test3</li>
</ol>

A solution to control the space between numerals and text when you want to use 'inside' with respect to widest (bonus roman numerals).

ol {
  counter-reset: n;
  display: table-row;
  text-align: left;
}
li {
  counter-increment: n;
  display: table-row;
  text-align: left;
}
li::before {
  content: counter(n, upper-roman) ".";
  display: table-cell;
  padding-right: 1rem;
}
<ol>
  <li>test1</li>
  <li>test2</li>
  <li>test3</li>
</ol>

A solution to control the space between numeral and text with respect to widest marking.

Tip: edit the last 'text-align' to get 'inside' or 'outside' effect. You can remove 'upper-roman' for standard numeral.

ol {
  counter-reset: n;
  display: table-row;
  text-align: left;
}
li {
  counter-increment: n;
  display: table-row;
  text-align: left;
}
li::before {
  content: counter(n, upper-roman) ".";
  display: table-cell;
  padding-right: 1rem;
  text-align: left;
}
<ol>
  <li>test1</li>
  <li>test2</li>
  <li>test3</li>
</ol>

Source Link
Johannes Green
Johannes Green

A solution to control the space between numerals and text when you want to use 'inside' with respect to widest (bonus roman numerals).

ol {
  counter-reset: n;
  display: table-row;
  text-align: left;
}
li {
  counter-increment: n;
  display: table-row;
  text-align: left;
}
li::before {
  content: counter(n, upper-roman) ".";
  display: table-cell;
  padding-right: 1rem;
}
<ol>
  <li>test1</li>
  <li>test2</li>
  <li>test3</li>
</ol>

lang-html