equal width and height of a custom numbers in an ordered list

Question

I have a section that automatically displays a list of post titles from WordPress, I have added the custom list number styled, but unfortunately based on the max-width of this section makes problem on making equal width and height of custom numbers

Live demo on codepen list numbers

HTML

<ol>
  <li>Lorem ipsum dolor sit amet.</li>
  <li>Tempore nostrum laborum sequi obcaecati.</li>
  <li>Illo iusto dolores magnam ratione!</li>
  <li>Illo iusto dolores magnam ratione!</li>
  <li> Amet odio rerum alias impedit! Amet odio rerum alias impedit! gooba astonishing</li>
</ol>

CSS

ol {
   max-width: 350px;
  list-style: none;
  counter-reset: my-awesome-counter;
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}
ol li {
  counter-increment: my-awesome-counter;
  display: flex;
  width: 100%;
  font-size: 0.8rem;
  margin-bottom: 0.5rem;
}
ol li::before {
  content: counter(my-awesome-counter);
  margin-right: 0.5rem;
  font-family: Raleway;
  font-style: normal;
  font-weight: bold;
  font-size: 18px;
  background: #29C9CE;
  width: 45px;
  height: 45px;
      align-items: center;
    text-align: center;
    display: flex;
    justify-content: center;
 
}

Always the result of numbers should be like this below

Note: in codepen above the number will have different width when the title is too long

How to solve this? any idea will be great

UPDATE FOR FUTURE REFERENCE

centering vertically the numbers with font Raleway is no brainer we need to use a different font to solve the problem or tweek it as pointed in a thread below like by adding this -webkit-font-feature-settings: "lnum";

Thanks to @shadow-lad for pointing this out I spend few hours trying to solve this damn

source: What is wrong with raleway

score 2 · Answer 1 · answered Apr 01 '21 at 16:13

Just set min-width to your class ol li::before:

 ol li::before {
   content: counter(my-awesome-counter);
   margin-right: 0.5rem;
   font-family: Raleway;
   font-style: normal;
   font-weight: bold;
   font-size: 18px;
   background: #29C9CE;
   min-width: 45px;
   height: 45px;
   align-items: center;
   text-align: center;
   display: flex;
   justify-content: center;    
 }

An example:

ol {
    max-width: 350px;
   list-style: none;
   counter-reset: my-awesome-counter;
   display: flex;
   flex-wrap: wrap;
   margin: 0;
   padding: 0;
 }
 ol li {
   counter-increment: my-awesome-counter;
   display: flex;
   width: 100%;
   font-size: 0.8rem;
   margin-bottom: 0.5rem;
 }
 ol li::before {
   content: counter(my-awesome-counter);
   margin-right: 0.5rem;
   font-family: Raleway;
   font-style: normal;
   font-weight: bold;
   font-size: 18px;
   background: #29C9CE;
   min-width: 45px;
   height: 45px;
       align-items: center;
     text-align: center;
     display: flex;
     justify-content: center;

 }

 <ol>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Tempore nostrum laborum sequi obcaecati.</li>
    <li>Illo iusto dolores magnam ratione!</li>
    <li> Amet odio rerum alias impedit! Amet odio rerum alias impedit! gooba astonishing</li>
  </ol>

hi, I think this is a dope solution but the list number for the 4 texts is not well vertically centered, or do I need glasses? , I tried ur solution but struggled also to make this number 4 to be centered as the rest of number 1,2,3 are well vertically centered, thanks for the answer — The Dead Man, Apr 01 '21 at 19:10
@TheDeadMan I've tried it at your code pen, but it looks like these columns are vertically centered. Maybe you can show this behavior? — StepUp, Apr 02 '21 at 07:17

score 2 · Accepted Answer · answered Apr 01 '21 at 16:17

2

Add flex-shrink: 0; to the before pseudo-element of the li element so that it always occupies the width it needs to.

So the code becomes:

ol li::before {
   ...
   flex-shrink: 0;
 }

Here's the end result:

ol {
   max-width: 350px;
  list-style: none;
  counter-reset: my-awesome-counter;
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}
ol li {
  counter-increment: my-awesome-counter;
  display: flex;
  width: 100%;
  font-size: 0.8rem;
  margin-bottom: 0.5rem;
}
ol li::before {
  content: counter(my-awesome-counter);
  margin-right: 0.5rem;
  font-family: Raleway;
  font-style: normal;
  font-weight: bold;
  font-size: 18px;
  background: #29C9CE;
  width: 45px;
  height: 45px;
      align-items: center;
    text-align: center;
    display: flex;
    justify-content: center;
    flex-shrink: 0;
 
}

<ol>
  <li>Lorem ipsum dolor sit amet.</li>
  <li>Tempore nostrum laborum sequi obcaecati.</li>
  <li>Illo iusto dolores magnam ratione!</li>
  <li> Amet odio rerum alias impedit! Amet odio rerum alias impedit! gooba astonishing</li>
</ol>

answered Apr 01 '21 at 16:17

shadow-lad

498
5
10

Good solution but still not getting the same result as the image provided above meaning the list with long text eg list number 4 the custom box number is not centered well vertically , check it yourself but thanks for the answer – The Dead Man Apr 01 '21 at 19:33
Hey @TheDeadMan! Thanks for the complement. I just checked it on my system and all the numbers are centered vertically when using the fonts Times New Roman and Roboto. The issue seems to be with the font Raleway. Try adding `line-height: 125%` to the `::before` `pseudo-element` – shadow-lad Apr 01 '21 at 19:49
1

Just checked the [glyphs for Raleway on Google Fonts](https://fonts.google.com/specimen/Raleway?preview.text_type=custom#glyphs), not all the characters are centered from the get go, so maybe try using a different font? – shadow-lad Apr 01 '21 at 19:53
your right there is problem with numbering in raleway font :( https://i.stack.imgur.com/XYuIR.png – The Dead Man Apr 01 '21 at 20:03

equal width and height of a custom numbers in an ordered list

2 Answers2