gintoki27 gintoki27 - 26 days ago 10
CSS Question

css li:before with direction from right to left

I wrote some code to remove the decimal point from an ordered list. This is my code:

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


it don't show decimal point but the showed number's direction is left to right as below

7 xxxxx
8 xxxxx
9 xxxxx
10 xxxxx
11 xxxxx


desired result: right to left like notepad++ line numbers


7 xxxxx
8 xxxxx
9 xxxxx
10 xxxxx
11 xxxxx


i have tried css "direction: rtl" but it not worked.
any ideas on how to achieve this? Thanks so much!

Answer

Try the following solution:

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>

Comments