Search code examples
javascripthtmlcssstylesheet

How to keep separate alignment between the list content and its numbering in html keeping list-style-position to inside?

I have following list and its styling

ol {
  background: #ff9999;
  padding: 20px;
  list-style-position: inside;
}

ol li {
  background: #ffe5e5;
  padding: 5px;
}

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

I am trying the keep all list numbers to inside in list item so that the numbers should remain left aligned with all number, the problem is that due to this the text is now wrapped and it is aligned with list item number, I want that text should be aligned with itself and not the number. How to do that ?

Following is the screenshot, as you can see the text is not aligned when it is large in length enter image description here

Solution

  • Here you go:

    ol {
  background: #ff9999;
  counter-reset: foo;
  display: table;
  padding: 20px;
}

ol>li {
  background: #ffe5e5;
  counter-increment: foo;
  display: table-row;
}

ol>li::before {
  content: counter(foo) ". ";
  display: table-cell;
  text-align: left; /* change this for number alignment right/left. */
  padding-right:5px; /* Increase this for space between number and text.*/
}
    <ol>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis facilis mollitia delectus nostrum illum. Ratione a autem, officiis ipsum tempore non ab consectetur illum commodi vitae quas. Beatae sit qui, officia sapiente debitis neque veniam deleniti
    amet officiis minus ipsam doloremque dignissimos aliquid commodi sequi, nulla ullam molestias voluptate natus.</li>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>