使用 CSS 删除每个数字后面的点后如何修复有序列表的对齐方式

Question

我正在为游戏创建一个规则页面，设计规范将规则放在有序列表中，每个数字后面没有句点：

1 规则一
2 规则二
3 规则三

我使用此代码删除了点：

ol {
    list-style-type: none;
    margin-left: 0px;
  }
  
  ol > li {
    counter-increment: customlistcounter;
  }
  
  ol > li:before {
    content: counter(customlistcounter) " ";
    font-weight: bold;
    float: left;
    width: 3em;
  }
  
  ol:first-child {
    counter-reset: customlistcounter;
  }

但是现在，当规则文本到达第二行时，文本直接从数字下方开始，而不是从第一行文本开头下方开始。

1 这就是我想要的 发生

2 这才是实际情况
正在发生

以防万一它有帮助，这是相关的 html：

 <ol>
        <h2 class="uppercase title fs-500 text-mid">How to Play</h2>
          <li class="fs-400">
            Red goes first in the first game.
          </li>
          <li class="fs-400">
            Players must alternate turns, and only one disc can be dropped in each turn. 
          </li>
          <li class="fs-400">
            The game ends when there is a 4-in-a-row or a stalemate.
          </li>
          <li class="fs-400">
            The starter of the previous game goes second on the next game.
          </li>
        </ol>

我尝试用边距和填充来调整它，但要么它溢出，要么什么也没做。

Answer 1

试试这个：

 <ol>
    <h2 class="uppercase title fs-500 text-mid">How to Play</h2>
      <li class="fs-400" data-value="1">
        Red goes first in the first game.
      </li>
      <li class="fs-400" data-value="2">
        Players must alternate turns, and only one disc can be dropped in each turn. 
      </li>
      <li class="fs-400" data-value="3">
        The game ends when there is a 4-in-a-row or a stalemate.
      </li>
      <li class="fs-400" data-value="4">
        The starter of the previous game goes second on the next game.
      </li>
</ol>

CSS：

ol {
   list-style: none;
   margin-left: 0px;
}

ol > li::before {
   content: attr(data-value) ' ';
}

注意：

:before

有两个冒号：

::before

Answer 2

@counter-style

at-rule 允许您定义不属于预定义样式集的计数器样式。

顺便说一句，将

h2

作为

ol

的子项是无效的。您需要为所需的样式应用边距和/或填充，以匹配

ol

的填充。

@counter-style no-decimal-point {
  system: extends decimal;
  suffix: '';
}

Ol {
  list-style: no-decimal-point;
}

li {
  padding-inline-start: 3em;
}

<h2>How to Play</h2>
<ol>
  <li>Red goes first in the first game.</li>
  <li>Players must alternate turns, and only one disc can be dropped in each turn.</li>
  <li>The game ends when there is a 4-in-a-row or a stalemate.</li>
  <li>The starter of the previous game goes second on the next game.</li>
</ol>