Стилизованный нумерованный список с точкой или как сделать составной content?

#html #css #вёрстка

Стилизованный список очень удобно сделать через значение счетчика, но тогда в 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;
}

  
one
  
two
  
three
  
one
  
two
  
three
  
one
  
two
  
three
  
one
  
two
  
three




    

Ответы

Ответ 1

Решение слишком простое, нужно без "+" в 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;
}

  
one
  
two
  
three
  
one
  
two
  
three
  
one
  
two
  
three
  
one
  
two
  
three