CODEWITHSUNDEEP
htmlcsshtml-lists
Benjamin
Benjamin

Reputation: 139

How do I replace the periods in an ordered list with emdashes and still maintain proper indentation?

I am trying to style an ordered list so that the numbers are aligned with the left margin, the periods are replaced with emdashes and the content of the list item is evenly indented. I've gotten pretty close:

Text with a numbered list

This uses the following CSS:

ol {
    counter-reset: list;
    padding: 0;
    margin-left: 2em;
}
ol > li {
    list-style: none; /* remove this line and you can see the 'real' numbering */
}
ol > li:before {
    content: counter(list) "— ";
    counter-increment: list;
    margin-left: -2em;
}

But it's only the margin-left styling on li:before that's making it look this way and stops working once numbers get above 10. Swapping the emdash for a different character would also break it.

Is there a way to achieve this?

Upvotes: 0

Views: 415

Answers (1)

Paulie_D
Paulie_D

Reputation: 115109

Add padding-left to the ol, set the pseudo-element to display:inline-block, set a width wide enough for your expected maximum number of characters and apply text-align:right.

Edit your values as required

ol {
  counter-reset: list;
  padding: 0;
  padding-left: 4em;
  margin: 1em;
}

ol>li {
  list-style: none;
  /* remove this line and you can see the 'real' numbering */
}

ol>li:before {
  content: counter(list) "— ";
  counter-increment: list;
  margin-left: -4em;
  width: 2.5em;
  display: inline-block;
  text-align: right;
}
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos commodi perferendis nobis optio quaerat eveniet minus odio accusamus quo eos assumenda totam itaque ullam, voluptate sed! Dicta quae repudiandae voluptate debitis earum quis culpa, quas labore, reiciendis perspiciatis cum corporis exercitationem error expedita deserunt est vero quasi enim harum nisi.</p>
<ol>
  <li>Lorem ipsum dolor sit amet.</li>
  <li>Lorem ipsum dolor sit amet.</li>
  <li>Lorem ipsum dolor sit amet.</li>
  <li>Lorem ipsum dolor sit amet.</li>
  <li>Lorem ipsum dolor sit amet.</li>
  <li>Lorem ipsum dolor sit amet.</li>
  <li>Lorem ipsum dolor sit amet.</li>
  <li>Lorem ipsum dolor sit amet.</li>
  <li>Lorem ipsum dolor sit amet.</li>
  <li>Lorem ipsum dolor sit amet.</li>
  <li>Lorem ipsum dolor sit amet.</li>
  <li>Lorem ipsum dolor sit amet.</li>
  <li>Lorem ipsum dolor sit amet.</li>
  <li>Lorem ipsum dolor sit amet.</li>
  <li>Lorem ipsum dolor sit amet.</li>
</ol>

Upvotes: 1

Related Questions