Как выровнять список пользовательских счетчиков?

Question

Этот список HTML (заказанный, но мой специальный заказ),

<ul class="custom">
  <li value="II">Alpha</li>
  <li value="III">Beta</li>
  <li value="☸" >Gamma</li>
  <li value="MXX">Delta</li>
</ul>

С CSS

.custom { list-style: none;  }
.custom li:before {
    content:  attr(value) ". ";
 }

Показывает список, но я не вижу, как выровнять "цифры", как в обычном списке. См. Проблему выравнивания точек на https://jsfiddle.net/0yb7aee8/

Answer 1

В списке по умолчанию номер находится в ul/ol с отступами.

Вы можете сделать ул. похоже, как это.

.listaEspecial {
  list-style: none;
  list-style-position: outside;
  padding-left: 0;
  margin-left: 0;
}
.listaEspecial li:before {
    content:  attr(value) ". ";
    text-align: right;
    display: inline-block; 
    width: 45px; 
    padding-right: 10px;
 }

Build-in list:
<ul class="listaEspecial">
  <li value="II">Alpha</li>
  <li value="III">Beta</li>
  <li value="☸" >Gamma</li>
  <li value="MXX">Delta</li>
</ul>

<hr/>
Standard list (better spacing and point-align):
<ol type="I" start="2">
  <li>Alpha</li>
  <li>Beta</li>
  <li value="100000" >Gamma</li>
  <li>Delta</li>
</ol>

ul/ol s отступ 40px, я использовал 55px (45px width + 10px padding для :before из-за более длинного номера.

Обратите внимание, что в списках по умолчанию есть проблема с более длинным числом, 40 пикселей слишком мало для гаммы и дельты.