CODEWITHSUNDEEP
htmlcss
Nirmal Kumar
Nirmal Kumar

Reputation: 169

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

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

Upvotes: 12

Views: 12741

Answers (2)

Mihai T
Mihai T

Reputation: 17697

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>

Upvotes: 3

Ivan Kharkivskyi
Ivan Kharkivskyi

Reputation: 601

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;
}

Upvotes: 3

Related Questions