Как создать собственную HTML-точку с правильным отступом

Question

Я хочу создать вид инвентаря, где каждый li представляет предмет, а точку следует заменить количеством предметов в инвентаре, например:

10x  Item1
1x   Item2
100x Item3

Я пробовал это, ноэто не совсем правильно, особенно отступ (особенно когда ширина обёртки ограничена):

ul{
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}
    
li {
  padding-left: 1em;
  text-indent: -1em;
  padding-right: 10px;
}

li:before{
  content: 'x' attr(data-item-count) ' ';
}

<div style="width:100px;border:1px solid #000">
  <ul>
      <li data-item-count="1">Health potion</li>
      <li data-item-count="10">Fire scroll</li>
      <li data-item-count="104">Skull</li>
  </ul>
<div>

Answer 1

Вы можете использовать абсолютную позицию на before и использовать отступ слева в li, равный before max-width. Итак, предположим, что у вас будет максимум x1234, вы должны учитывать это в размере заполнения.

См. Ниже

ul{
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}
    
li {
 

  padding-right: 10px;
    position: relative;
    padding-left: 40px;

  position:relative;
}

li:before{
  content: 'x' attr(data-item-count) ' ';
  position:absolute;
  left:0;
}

<div style="width:100px;border:1px solid #000">
  <ul>
      <li data-item-count="1">Health potion</li>
      <li data-item-count="10">Fire scroll</li>
      <li data-item-count="104">Skull</li>
  </ul>
<div>

Answer 2

Если вам нужно сохранить разметку неупорядоченного списка, вы можете сделать некоторое позиционирование с помощью inline-block.

ul {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}

li {
  display: inline-block;
  width: 100%;
}

li:before {
  content: 'x' attr(data-item-count) ' ';
  padding-right: 1rem;
  width: 2rem;
  display: inline-block;
  text-align: right;
}

<ul>
  <li data-item-count="1">Health potion</li>
  <li data-item-count="10">Fire scroll</li>
  <li data-item-count="104">Skull</li>
</ul>

---

Тем не менее, это выглядит как хороший кандидат на <dl> и display: grid

Обычно этот элемент используется для реализации глоссария или для отображения метаданных (список пар ключ-значение) .

dl {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-column-gap: 0.3em;
  grid-row-gap: 0.5em;
  width: 100px;
  border: 1px solid #000;
  padding: 5px;
}

dt,
dd {
  margin: 0;
}

<dl>
  <dt>x1</dt>
  <dd>Health potion</dd>
  <dt>x10</dt>
  <dd>Fire scroll</dd>
  <dt>x104</dt>
  <dd>Skull</dd>
  <dt>x105</dt>
  <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</dd>
</dl>