0

I want to use decimal, upper-alpha, lower-alpha, upper-roman, and lower-roman for first five level respectively. I tried doing this by writing CSS in pad.css

.list-number1 li:before {
  content: counter(first)") " ;
  counter-increment: first;
  list-style-type: lower-alpha;
}

I tried just one for testing but it didn't work. I wanted to control the character after the counter which worked fine putting ") " using content but list-style-type doesn't seem to be working here. Can someone point me to the right direction?

Blue
  • 66
  • 1
  • 8

1 Answers1

0

This worked for me

.list-number1 li:before {
  content: counter(first, decimal)". " ;
  counter-increment: first;
}
.list-number2 li:before {
  content: counter(second, upper-alpha)") " ;
  counter-increment: second;
}
.list-number3 li:before {
  content: counter(third, lower-alpha)") " ;
  counter-increment: third;
}
.list-number4 li:before {
  content: counter(fourth, upper-roman)") " ;
  counter-increment: fourth;
}
.list-number5 li:before {
  content: counter(fifth, lower-roman)") " ;
  counter-increment: fifth;
}
Blue
  • 66
  • 1
  • 8