Как добавить 0 (ноль), когда счетчик вставляет число от 0 до 9 после 10, 11, 12 ...? это возможно? - PullRequest
Новая
       33

Как добавить 0 (ноль), когда счетчик вставляет число от 0 до 9 после 10, 11, 12 ...? это возможно?

0 голосов
/ 17 октября 2019

Я пытаюсь добавить числа, используя counter-increment , потому что я хочу только изменить цвет номера, который работает нормально. Я также хочу добавить 0 (ноль), если число меньше 10, это возможно? Я приложил изображение того, что я хочу.

enter image description here

* {
  box-sizing: border-box;
}

img {
  max-width: 100%;
}

.counter ol {
  list-style: none;
  counter-reset: item;
  max-width: 500px;
  margin: 0 auto;
}

.counter ol li {
  position: relative;
  padding: 0 0 9px 25px;
  margin: 0 0 10px 0;
}

.counter ol li a {
  color: red;
}

.counter ol li:before {
  position: absolute;
  left: 0;
  content: counter(item) ".";
  counter-increment: item;
  color: #000;
  font-size: 18px;
  line-height: 24px;
  font-weight: bold;
}
<section class="counter">
  <ol>
    <li><a href="#">Lorem ipsum, or lips</a></li>
    <li><a href="#">Lorem ipsum, or lips</a></li>
    <li><a href="#">Lorem ipsum, or lips</a></li>
    <li><a href="#">Lorem ipsum, or lips</a></li>
    <li><a href="#">Lorem ipsum, or lips</a></li>
    <li><a href="#">Lorem ipsum, or lips</a></li>
    <li><a href="#">Lorem ipsum, or lips</a></li>
    <li><a href="#">Lorem ipsum, or lips</a></li>
    <li><a href="#">Lorem ipsum, or lips</a></li>
    <li><a href="#">Lorem ipsum, or lips</a></li>
    <li><a href="#">Lorem ipsum, or lips</a></li>
    <li><a href="#">Lorem ipsum, or lips</a></li>
  </ol>
</section>

1 Ответ

2 голосов
/ 17 октября 2019

Вам просто нужно добавить это к ol: 

list-style-type: decimal-leading-zero;


* {
  box-sizing: border-box;
}

img {
  max-width: 100%;
}

.counter ol {
  list-style-type: decimal-leading-zero;
  color:red;
  counter-reset: item;
  max-width: 500px;
  margin: 0 auto;
}

.counter ol li {
  position: relative;
  padding: 0 0 9px 25px;
  margin: 0 0 10px 0;
}

.counter ol li:before {
  position: absolute;
  left: 0;
  color: red;
  font-size: 18px;
  line-height: 24px;
  font-weight: bold;
}
<section class="counter">
  <ol>
    <li><a href="#">Lorem ipsum, or lips</a></li>
    <li><a href="#">Lorem ipsum, or lips</a></li>
    <li><a href="#">Lorem ipsum, or lips</a></li>
    <li><a href="#">Lorem ipsum, or lips</a></li>
    <li><a href="#">Lorem ipsum, or lips</a></li>
    <li><a href="#">Lorem ipsum, or lips</a></li>
    <li><a href="#">Lorem ipsum, or lips</a></li>
    <li><a href="#">Lorem ipsum, or lips</a></li>
    <li><a href="#">Lorem ipsum, or lips</a></li>
    <li><a href="#">Lorem ipsum, or lips</a></li>
    <li><a href="#">Lorem ipsum, or lips</a></li>
    <li><a href="#">Lorem ipsum, or lips</a></li>
  </ol>
</section>
...