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
    8 мая 2018 в 16:37
  • @МаксимЛенский всё разобралась, пока вопрос писала! + был лишний!
    – kizoso
    8 мая 2018 в 16:37
  • 1
    ну тогда + в карму
    – user33274
    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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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