CSS李:before with direction from right to left

Question

我编写了一些代码来从有序列表中删除小数点。这是我的代码:

ol {
  list-style-type: none;
  counter-reset: level1 
}
ol li:before {
  content: counter(level1) " "; 
  counter-increment: level1;
}

不显示小数点，但显示的数字方向如下从左到右

7   xxxxx
8   xxxxx
9   xxxxx
10  xxxxx
11  xxxxx

期望的结果:从右到左就像 Notepad++ 行号

 7  xxxxx
 8  xxxxx
 9  xxxxx
10  xxxxx
11  xxxxx

我尝试过 css“direction: rtl”，但没有成功。 关于如何实现这一目标有什么想法吗？非常感谢!

Answer 1

尝试以下解决方案:

ol {
  list-style-type: none;
  counter-reset: level1;
}
ol li:before {
  content: counter(level1) "."; 
  counter-increment: level1;
  display:inline-block;
  text-align:right;
  min-width:20px;
}

<ol>
  <li>Test 1</li>
  <li>Test 2</li>
  <li>Test 1</li>
  <li>Test 2</li>
  <li>Test 1</li>
  <li>Test 2</li>
  <li>Test 1</li>
  <li>Test 2</li>
  <li>Test 1</li>
  <li>Test 2</li>
</ol>