无序列表li后等于space

Question

我在 <ol> 的 <li> 之后删除了点 (.) 并给出了 '|'在数字之后。

我使用以下代码实现了它：

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;
}

但是数字后面的space不相等

我需要数字后的统一间距。请帮我解决这个问题。

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>

除此之外，font-family就是这样一种方式，所有的数字都有不同的space。

Answer 1

添加设置的宽度（例如 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 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

如果您只想定位某些项目，可以使用 :nth-of-type 选择器：

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

}

Answer 4

您可以尝试 table 布局，而无需设置固定宽度，无论您使用何种数字，它都可以工作。

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>

无序列表li后等于space

Equal space after li of unordered list

html

css

html-lists