Ordered list: Styling of Numerics without counter reset and Pseduo elements

I searched on the Internet and found that the counter reset and pseudo-element technique were used to style the numerics used in the list. I find one such example here.

I believe based on these results there is no simple way, but still, I am posting here, in case, there is some other easy way w/o using counter reset, and the Pseudo element.

What is it that you want to do exactly and why do you want to tie your hands behind your back while you are doing it ? :slight_smile:

If you just want to style the marker then you can do that now.

1 Like

I tried to test that property:

Font-size was working, but the background color was not reflecting and changed in the browser.

I have done a codepen here: https://codepen.io/codeispoetry/pen/NWwNprZ

What I am trying to do is to create a circular background behind those numbers.

Yeah, that won’t work unfortunately due to how the browser interprets the ::marker pseudo element.
https://drafts.csswg.org/css-pseudo/#marker-pseudo

The spec has specified only certain properties can be used (though more can be added at a later date).

To do what you want, you need to abandon the marker and create your own increment pseudo element with :before :

2 Likes

Looks like Ryan beat me to it. But a slightly different approach without a counter.

3 Likes
ol.li.st li {
  margin-right: 10px;
  &:last-child {
    margin-right: 0;
  }
}

This is a great way of writing CSS. Is there any special name for writing in this way? what should I search to get more Kanck on this way of writing CSS.

What’s one more? Stylized numbers and a background :lol:

1 Like

Hi there, what did you do? you are still using a Pseudo element: before ?

I initially thought of that, but just to be “that person”, your method fails if numbers hit double digits. Daves too (not that mine does super great with double digits…)

Oops - This is just a habit of mine I’ve developed due to my work. This is called Sass. It get processed / compiled into regular CSS.

2 Likes

This controls the styling of the marker:

/* marker size and color */
ol.li.st li::marker { color: red; font-size: 2rem; }

Unfortunately, marker is considered an inline element, which means no background. So I added a different pseudo element to the li and added the background to it.

/* add the grey background */
ol.li.st li {
   position:relative;
}
ol.li.st li:before {
    content: "";
    position:absolute;
    left:-2.25rem;
    top:.5rem;
    background-color: #dbd8d8;
    z-index:-1;
    display:inline-block;
    width:2rem;
    height:2rem;
    border-radius:5px;
}
1 Like

Could also write this as

ol.li.st li:not(:last-child) {
  margin-right: 10px;
}
2 Likes

Huh…you’re right. I did it more to see if I could than a practical exercise. Let’s see if I can fix that…

2 Likes

A little better, but still a bit fragile:-

2 Likes

Tweaked to handle the larger marker but will break at 100 :frowning:

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.