An Opening and Closing Ordered List in CSS

Earlier this year I was asked if it was possible to replicate an ordered list that could be opened and closed that worked down to IE8…

Ultimately the requirements changed and it was never used, however, due to my lack of finding a solution when initially searching I thought it worthwhile to publish the solution:

.list-counter {
    counter-reset: list-index;
}

.list-counter__section > div {
    counter-increment: list-index;
    position: relative;
    margin-left: 20px;
}

.list-counter__section > div:before {
    width: 50px;
    position: absolute;
    text-align: right;
    margin-left: -60px;
    content: counter(list-index) ".";
}

/*osx mis-aligns numbers and sentences that start with strong*/
.list-counter__section strong {
    line-height: 100%;
}

View demo

Ideally CSS would have the construct to do this with lists but unfortunately, it does not.

In the example, I have used <div>’s for each item. You could replace these with <li>’s and use a list, but that has implications from semantic and accessibility perspectives. If you do choose to use a list you will need to add:

.list-counter__section {
  list-style-type: none;
}