Question

I can’t figure out an elegant way to accomplish the following using CSS:

I need the numbers of the ordered list to have the teal bubble-looking background. I have this image (which includes the white stroke):

But I can’t figure out how to put it behind each of the numbers using CSS. Thanks.

Answer 1

I would probably do something like this:

ol {
    list-style-position: inside;
    color: white;
}
ol li {

    background-image: url('nswCH.png');
    background-position: -5px;
    background-repeat: no-repeat;
    padding-left: 7px;
}