Currently, I'm working on developing a rule page for a game. The specific layout requirements dictate that the rules be presented in an ordered list without periods following each number:
1 Rule one
2 Rule two
3 Rule three
To achieve this format, I utilized the following code snippet:
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;
}
An issue arises when the text of the rules extends to a second line, positioning the subsequent line directly below the number instead of aligning it with the beginning of the first line of text.
1 this is how I envision the formatting to display
2 this is how it currently appears
on the screen
In my attempt to rectify this matter, adjusting margins and padding proved ineffective, resulting in either overflow or negligible change.
If useful, here's a snippet of the relevant HTML:
<ol>
<h2 class="uppercase title fs-500 text-mid">How to Play</h2>
<li class="fs-400">
Red makes the initial move in the inaugural game.
</li>
<li class="fs-400">
Players take turns consecutively, dropping a single disc per turn.
</li>
<li class="fs-400">
The game concludes upon achieving a 4-in-a-row or reaching a stalemate.
</li>
<li class="fs-400">
The initiator of the preceding game assumes the second position in the subsequent game.
</li>
</ol>