Список маркеров: можно ли использовать (1) атрибут для содержимого при (2) сохранении выравнивания текста?

Question

Список маркеров: можно ли использовать (1) атрибут для содержимого при (2) сохранении выравнивания текста?

Цель:

       custom bullet text from attr : aligned list text
longer custom bullet text from attr : aligned list text

Попытка:

HTML:

<ul>
  <li data-bullet="custom bullet text from attr : "> aligned list text</li>
  <li data-bullet="longer custom bullet text from attr : "> aligned list text</li>
</ul>

CSS:

list-style-type: attr(data-label);

Я могу использовать (1) или (2), но не оба сразу:

Я могу получить собственный текст без выравнивания

li::before {
  content: attr(data-bullet);
  margin-right: 5px;
}

li {
  list-style-type: none;
}

<ul>
  <li data-bullet="glorp"> text to align</li>
  <li data-bullet="glorpulous">text to align</li>
</ul>

Или выровненный текст, но только со статическим c списком предопределенных маркеров

ol {
list-style-type: upper-roman;
}

<ol>
<li>aligned text</li>
<li>aligned text</li>
<li>aligned text</li>
<li>aligned text</li>
<li>aligned text</li>
<li>aligned text</li>
<li>aligned text</li>
</ol>

Итак, есть ли способ динамически получать текст маркера из атрибута в каждом отдельном элементе <li>, сохраняя при этом <li> текст с выравниванием?

Answer 1

Я немного повозился и выяснил:

ul{
  background:red;
}
li::before {
  content: attr(data-bullet);
  margin-right: 5px;
  background:green;
  display:block;
  float:left;
  width:100px;
  text-align:right;
}

li {
  list-style-type: none;
  background:blue;
  display:block;
  
}

<ul>
  <li data-bullet="glorp"> text to align</li>
  <li data-bullet="glorpulous">text to align</li>
</ul>

Стиль ужасен, и, вероятно, есть лучший способ сделать это, но, похоже, он работает.

EDIT : А ширину пули необходимо указать

Answer 2

Вы можете использовать display: table и draw columns:

li::before {
  content: attr(data-bullet)'.';
  display: table-cell;
  text-align: right;
}

li {
  list-style-type: none;
}
ul {
  display: table;
  border-spacing: 5px 0;
}
li {
  display: table-row;
}

<ul>
  <li data-bullet="glorp"> text to align</li>
  <li data-bullet="glorpulous">text to align</li>
</ul>

В противном случае вам нужно будет установить фиксированную ширину для :: before.