4

Стилизованный список очень удобно сделать через значение счетчика, но тогда в content можно поставить только порядковый номер элемента списка. Возможно ли сделать его составным? Хочу иметь на выходе число сразу после которого идет точка. Что-то вроде этого:

content:counter(olNum)+'.';

Но запись такого вида не дает никакого результата, и нумерация вовсе не работает.

Вот рабочий пример:

ol {
  margin: 0;
  padding: 0;
  counter-reset: olNum;
  list-style: none;
}

li {
  position: relative;
  margin-bottom: 2px;
  padding-left: 50px;
}

li:before {
  counter-increment: olNum;
  content: counter(olNum);
  position: absolute;
  top: 1px;
  left: 1px;
  font-weight: bold;
  color: red;
}
<ol>
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ol>

3
  • как не работает ? здесь работает же
    – user33274
    Commented 8 мая 2018 в 16:37
  • @МаксимЛенский всё разобралась, пока вопрос писала! + был лишний!
    – kizoso
    Commented 8 мая 2018 в 16:37
  • 1
    ну тогда + в карму
    – user33274
    Commented 8 мая 2018 в 16:38

1 ответ 1

4

Решение слишком простое, нужно без "+" в content'е:

ol {
  margin: 0;
  padding: 0;
  counter-reset: olNum;
  list-style: none;
}

li {
  position: relative;
  margin-bottom: 2px;
  padding-left: 50px;
}

li:before {
  counter-increment: olNum;
  content: counter(olNum)'.';
  position: absolute;
  top: 1px;
  left: 1px;
  font-weight: bold;
  color: red;
}
<ol>
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ol>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.