Равное пространство после li неупорядоченного списка

Question

Я удалил точку (.) После <li> из <ol> и дал '|' после числа.

Я добился этого, используя следующий код:

ol {
    counter-reset: item;
}
ol li::before {
    content: counter(item) " ";
    counter-increment: item;
    padding-right: 15px;
    border-right: 2.5px solid rgba(37, 194, 240, 0.8);
    margin-right: 15px;
}

Но пробел после чисел не равен.

Мне нужен равномерный интервал после числа. Пожалуйста, помогите мне решить эту проблему.

ol{counter-reset: item;columns: 2;}
ol li{display:block;margin-bottom:10px;}
ol li::before {
	content: counter(item) " ";
	counter-increment: item;
	padding-right: 15px;
	border-right: 2.5px solid rgba(37, 194, 240, 0.8);
	margin-right: 15px;
}

<ol>
<li>My abc</li>
<li>LiveColor</li>
<li>LiveFood</li>
<li>Ola</li>
<li>Uber</li>
<li>Good Chat</li>
<li>Food Panda</li>
<li>Domino'd</li>
<li>Clickfood</li>
<li>Smartyo</li>
<li>Tide</li>
<li>Webseries</li>
<li>GoPro</li>
<li>Liveshow</li>
</ol>

В дополнение к этому семейство шрифтов таково, что все числа имеют разные пробелы.

Answer 1

Вы можете попробовать макет таблицы без необходимости устанавливать фиксированную ширину, и она будет работать независимо от того, какие числа вы будете использовать.

ol {
  counter-reset: item;
  columns: 2;
}

ol li {
  display: table-row;
}

ol li::before {
  display:table-cell;
  /*text-align:right; uncomment this if you want to align to the right  */
  content: counter(item) " ";
  counter-increment: item 99;
  padding-right: 30px;
  padding-bottom: 10px;
  /* we use background instead of border */
  background: linear-gradient(rgba(37, 194, 240, 0.8),rgba(37, 194, 240, 0.8)) 
     right 15px top 0/ /* right=padding right*/
     2.5px calc(100% - 10px) /* width=2.5px height=100% - padding bottom */
     no-repeat;
}

<ol>
  <li>My abc</li>
  <li>LiveColor</li>
  <li>LiveFood</li>
  <li>Ola</li>
  <li>Uber</li>
  <li>Good Chat</li>
  <li>Food Panda</li>
  <li>Domino'd</li>
  <li>Clickfood</li>
  <li>Smartyo</li>
  <li>Tide</li>
  <li>Webseries</li>
  <li>GoPro</li>
  <li>Liveshow</li>
</ol>

Answer 2

Попробуйте эти css коды ..

ol{counter-reset: item;columns: 2;}
ol li{display:block;margin-bottom:10px;position: relative;padding-left: 40px;}
ol li::before {
    content: counter(item) " ";
    counter-increment: item;
    position: absolute;
    left: 0px;
}
ol li::after {
    content: " ";
    position: absolute;
    background-color: rgba(37, 194, 240, 0.8);
    height: 100%;
    width: 2px;
    top: 0px;
    left: 25px;
}

Answer 3

Добавьте заданную ширину (скажем, 3em) ... и выровняйте текст вправо.

ol {
  counter-reset: item;
  columns: 2;
}

ol li {
  display: block;
  margin-bottom: 10px;
}

ol li::before {
  content: counter(item) " ";
  counter-increment: item;
  padding-right: 15px;
  border-right: 2.5px solid rgba(37, 194, 240, 0.8);
  margin-right: 15px;
  width: 3em;
  text-align: right;
  display: inline-block;
}

<ol>
  <li>My abc</li>
  <li>LiveColor</li>
  <li>LiveFood</li>
  <li>Ola</li>
  <li>Uber</li>
  <li>Good Chat</li>
  <li>Food Panda</li>
  <li>Domino'd</li>
  <li>Clickfood</li>
  <li>Smartyo</li>
  <li>Tide</li>
  <li>Webseries</li>
  <li>GoPro</li>
  <li>Liveshow</li>
</ol>

Answer 4

Если вы хотите использовать только определенные элементы, вы можете использовать: nth-of-type селектор:

ol li:nth-of-type(n+10)::before {

}