How to add a CSS background for ::marker in list?

Question

I have an HTML ordered list with a structure something like this.

<ol>
  <li class="myclass"> First Element
  </li>
  <li class="myclass"> First Element
  </li>
  <li class="myclass"> First Element
  </li>
</ol>

I wanted to add a background colour to list numbers 1,2,3. I found ::marker selector available in CSS. But, then I was able to use this ::marker selector to change the color of the font, but I'm unable to change the background-color.

.myclass::marker {
  color: red;
}

The background-color property doesn't seem to work inside ::marker selector. Is there any work around?

Edit:

I'm looking to have a design similar to this numbering background

Right now, they do not: https://nimb.ws/yPdrqA You can use the pseudo-element method, instead. — m4n0, Jun 25 '21 at 18:24
A little research won't hurt https://developer.mozilla.org/en-US/docs/Web/CSS/::marker#allowable_properties and https://stackoverflow.com/questions/24428980/bullet-point-background-color-attribute-css — Mihai T, Jun 25 '21 at 18:27
@MihaiT Thanks for sharing these resources. I've gone through these resources before posting. I was just looking to know if any workaround is possible to achieve. — Nirmal Kumar, Jun 25 '21 at 19:28
@MihaiT I have tried the workaround shared in the second link removes all the numbering, while I've to maintain the numbering of the ordered list in addition to the background. Workaround result: https://codepen.io/nirmal9965/pen/gOWYgwK Expected result: https://i.stack.imgur.com/eX4HY.png — Nirmal Kumar, Jun 26 '21 at 15:02
We can simple make use of the following css property: list-style-image — manojadams, Jan 11 '23 at 11:03

score 3 · Answer 1 · answered Jun 25 '21 at 18:30

3

Pseudo element marker works like inline text element and doesn't support property background. But instead, you can apply background for another pseudo-element, as an example ::before. It will work if you add some properties else: content, width, height, display.

.myclass {
    position: relative;
}
.myclass::before {
    position: absolute;
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    top: 5px;
    left: 5px;
    background: green;
}

answered Jun 25 '21 at 18:30

Ivan Kharkivskyi

569
1
4
22

1

Thanks for sharing the code snippet. I've tried it and it seems like the background is appearing over the text: https://codepen.io/nirmal9965/pen/eYWOgvp – Nirmal Kumar Jun 26 '21 at 15:07
Nothing special, position values was set conditionally, as example, not ready recipe. Because we don't know which bakground you want. Just play with this properties. You could change values, as example, left: -5px; and something else. Also, you should use tag
– Ivan Kharkivskyi Jun 26 '21 at 16:48

score 1 · Answer 2 · answered Jun 29 '21 at 09:14

As explain in another answer here, you can use pseudo elements to achieve what you want. In your example https://codepen.io/nirmal9965/pen/gOWYgwK you were using list-style:none; which ofcourse removes the numbers because it transforms the ordered list in a default list.

Just use pseudo elements and position them under the numbers. You can tweak the positioning and the height/width of the before pseudo-element.

li {
   position:relative;
   font-size:16px;
   }
li:before {
    content: "";
    position:absolute;
    left:-20px;
    background-color:red;
    z-index:-1;
    display:inline-block;
    width:16px;
    height:16px;
    border-radius:5px;
}

<ol>
  <li>
    First element
  </li>
  <li>
    Second element
  </li>
</ol>

How to add a CSS background for ::marker in list?

2 Answers2

Linked