Customized counter ordered list alignment issue

Question

I have a simple ordered list. I used counter-reset property to change the styles for number. But the issue is when the container (.list) width is small the list doesn't align directly like an ordered list should do.

.list{
  border: 1px solid black;
  width: 40%;
  box-sizing: border-box;
}
ol{
  list-style: none;
  counter-reset: csscounter;
  padding-left: 0.5rem;
}

li{
    counter-increment:csscounter;
    margin-bottom: 0.25rem;
}
li:before{
  content: counter(csscounter);
  background: gray;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 100%;
  display: inline-block;
  line-height: 1.5rem;
  text-align: center;
  color: white;
  margin-right: 0.5rem;
}

<div class='list'>
<ol>
  <li>
    Enter your mobile number to view  your book collection
  </li>
  <li>
    Select the books that you want to add to your collection
  </li>
  <li>
    Confirm and Submit
  </li>
</ol>
</div>

If I remove the css properties for <ol> the list renders correctly and no alignment issues occurs.

.list{
  border: 1px solid black;
  width: 40%;
  box-sizing: border-box;
}

<div class='list'>
<ol>
  <li>
    Enter your mobile number to view  your book collection
  </li>
  <li>
    Select the books that you want to add to your collection
  </li>
  <li>
    Confirm and Submit
  </li>
</ol>
</div>

score 1 · Accepted Answer · answered Oct 21 '20 at 10:16

The <ul> has different paddings.

The problem is that you introduced a ::before pseudo element. You have to rework your paddings and margins.

.list {
  border: 1px solid black;
  width: 40%;
  box-sizing: border-box;
}

ol {
  list-style: none;
  counter-reset: csscounter;
  padding-left: 2rem;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

li {
  counter-increment: csscounter;
  margin-bottom: 0.25rem;
}

li:before {
  content: counter(csscounter);
  background: gray;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 100%;
  display: inline-block;
  line-height: 1.5rem;
  text-align: center;
  color: white;
  margin-left: -1.75rem;
}

<div class="list">
  <ol>
    <li>
      Enter your mobile number to view your book collection
    </li>
    <li>
      Select the books that you want to add to your collection
    </li>
    <li>
      Confirm and Submit
    </li>
  </ol>
</div>

Just a thought: if you would set `width: 2rem` and `margin-left: 2rem` for `li::before` (same as `padding-left: 2rem` of the `ol`, wouldn’t you get a better centered item instead of trying to pseudo-center using `width: 1.5rem` and `margin-left: -1.75rem` to pull it to the left? — Jens, Oct 24 '20 at 22:16
The "problem" (which is not actually a problem) is that you are using a pseudo element. Browsers understand that element the same way you have your characters. The negative margin actually pushes the whole line to the right. Here have a look - [link](https://css-tricks.com/custom-list-number-styling/) — Angelosp, Oct 26 '20 at 12:07

G-Cyrillus · Answer 2 · 2020-10-21T10:43:44.170

Edited to avoid a duplicate answer.

You can also use ,::marker, padding, list-style-position and a radial-gradient background:

possible example

.list {
  border: 1px solid black;
  width: 250px;
  box-sizing: border-box;
}
::marker{color:#ddd;}
li {
  list-style-position: inside;
  text-indent: -1.5em;
  padding: 0.3em 0 0.2em 2em;
  background: radial-gradient(
    circle at 0.8em 0.9em,
    gray 0.6em,
    tomato,
    transparent 0.75em
  );
}

<div class='list'>
<ol>
  <li>
    Enter your mobile number to view  your book collection
  </li>
  <li>
    Select the books that you want to add to your collection
  </li>
  <li>
    Confirm and Submit
  </li> 
</ol>
</div>

Customized counter ordered list alignment issue

2 Answers2