Styling list::befores and keeping the numbering going

Question

I have a small problem with styling my ordered lists. Consider the following (auto-generated) HTML. The fact that it is automatically generated is quite important because I don't really feel like correcting every single HTML file that is generated this way. Now to style JUST the numbers on this bad boy, I wrote some style sheets of cascading persuasion. See below.

ol {
  list-type: none;
}

ol::first-of-type {
  /* The selector here is my latest addition, and surprise surprise, it doesn't play */
  counter-reset: count_list;
  /* well with the incremention of the counter. Without this, the numbering */
} /* does increment, except when the <ol>'s get closed to accomodate the <p> */

ol li::before {
  display: inline-block;
  counter-increment: count_list;
  content: counter(count_list) " ";
  color: $c-brand-primary;
  /* substitute this with any hex, I'm using SCSS variables */
  width: 1.3em;
  float: left;
  margin: 0 0 0 -1.3em;
  font-weight: bold;
  text-align: right;
  direction: rtl;
  padding-right: 1.3em;
  /* yeah I know it's quite the long way 'round, but it does what I want it to */
}

<ol>
  <li>Item1</li>
  <li>Item2 is an item that looks a lot like a Lorem ipsum dolor sit amet, consectetuer adipiscing elit, meaning it's quite long and causes some problems in wrapping.
</ol>
<!--Yes, it actually closes the ol in favour of showing the next-->
<p>
  <p> Pretend like this says something very long and interesting </p>
  <ol start=3>
    <li> And we list on.</li>
  </ol>

Is there any CSS way to get the styling to take these pesky starts into consideration AND let me style JUST the numbers of the list the way I want them to?

I don’t think that’s really possible. https://stackoverflow.com/questions/23699128/ shows a way to reset the counter to the appropriate value using `ol[start="3"]`, but I doubt you want to explicitly write code for all the possible start values. (In your example, you could apply `counter-reset: count_list;` to a common parent element of those lists maybe, but that would actually get you a counter based on the number of LI then, and not take any arbitrary start values into account. In this situation here that _might_ be enough though.) — 04FS, Jan 27 '20 at 12:54
Thanks for the response! I checked the link and I see there's a JS option though... I'm pretty sure the consensus over there is not to let SCSS generate all kinds of CSS lines to accomodate my problem, but what SCSS function could come close to what that jQuery does? — Vinny Hummel, Jan 27 '20 at 13:07

score 0 · Answer 1 · answered Jan 27 '20 at 13:09

You can remove the number with ul {list-style: none}

Then, as you area already using :before, you could use :afterto add your number in your li's position them absolute.

something like this:

ol {
 list-style: none
}

ol::first-of-type {            
 counter-reset: count_list;    
}                              
li {position:relative;counter-increment: li}
.second-ol li {counter-increment: li}
ol li::before {
        display: inline-block;
        counter-increment: count_list;
        content: counter(count_list) " ";
        color: red;              
        width: 1.3em;
        float: left;
        margin: 0 0 0 -1.3em;
        font-weight: bold;
        text-align: right;
        direction: rtl;
        padding-right: 1.3em;     /
}
ol li::after {
  content: counter(li) ;
  color: blue;
  position:absolute;
  left:-20px;
  top:0;
}
.second-ol li::after {
  counter-increment: li+2;
}

<ol>
 <li>Item1</li>
 <li>Item2 is an item that looks a lot like a Lorem ipsum dolor sit amet, consectetuer adipiscing elit, meaning it's quite long and causes some problems in wrapping.
</ol>                //Yes, it actually closes the ol in favour of showing the next <p>

<p> Pretend like this says something very long and interesting </p>

<ol start=3 class="second-ol">
 <li> And we list on.</li>
</ol>

Hey, thanks for the reply, comprehensive stuff. The thing is: in your solution I'll still have to edit all my HTML files. I can just remove all the tags and superfluous starts if I wanted to do that. — Vinny Hummel, Jan 27 '20 at 13:27
Not necesarilly. I added a class to your second ul to make it easier to understand but you may use insteed: `ol:nth-child(2) {...}`, ol:nth-child(3) {...}` and so on. if it's dinamic content with a bit of javascript you may "count" every ol li numbers to change the counter increment. — Alvaro Menéndez, Jan 27 '20 at 15:03

Styling list::befores and keeping the numbering going

1 Answers1