CODEWITHSUNDEEP
css
gintoki27
gintoki27

Reputation: 1931

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!

Upvotes: 2

Views: 446

Answers (2)

Nikhil Nanjappa
Nikhil Nanjappa

Reputation: 6642

Try adding these styles to your ol li:before - Codepen here

ol li:before {
  content: counter(level1) " "; 
  counter-increment: level1;

/* below CSS added */
  color: red;
  display: inline-block;
  width: 1em;
  margin-left: -1.5em;
  margin-right: 0.5em;
  text-align: right;
  direction: rtl
}

You can play around more reading from this good article

Upvotes: 1

Sebastian Brosch
Sebastian Brosch

Reputation: 43594

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>

Upvotes: 1

Related Questions