Question 219488 in Html Question posted in
Some basic documentation can be found here.

Html – How to fix alignment on ordered list after using CSS to remove the dot after each number

I am creating a rules page for a game, and the design specs have the rules in an ordered list without the period after each number:

1 Rule one
2 Rule two
3 Rule three

I removed the dot using this code:

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

But now when the rules text reaches the second line, the text starts directly underneath the number instead of underneath the beginning of the first line of text.

1 this is what I want
to happen

2 this is what is actually
happening

Just in case it’s helpful, here’s the relevant 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>

I tried to adjust it with margins and padding, but either it ended up overflowing or doing nothing.

Tags:

2

Answers


  1. 0

    Try this:

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

    Note: :before has two colons: ::before

    Login or Signup to reply.
  2. 0

    The @counter-style at-rule lets you define counter styles that are not part of the predefined set of styles.

    You can style the number with the ::marker pseudo-element.

    BTW, it is invalid to have h2 as a child of ol. You’ll need to apply margin and/or padding for the desired styling to match the padding of ol.

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

::marker {
  font-weight: bold;
}

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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search