Ordered list with background image not working

Can’t seem to put the numbers into the circles, no matter what I try with negative and positive margin and padding values. :man_shrugging: Any hints?

The image looks like a numbered list, could you post the HTML code for the list with relevant CSS?

Where is/are the background image/s supposed to be?

From the post and the image, Braveheart4 wants the numbers to go inside of the green circles to their right.
I don’t know if any of us can offer any suggestions without seeing the code.

Hi there Braveheart4,

here is one possible solution…


…and its code…




I’m actually developing this site via Webflow, so not sure how the code gets rendered. But I can see that the ::before pseudo element does the trick. Sadly, there is no way to style that within the Webflow editor. Once I purchase a site plan before publishing the site, I’ll embed the custom code @coothead suggested me and see if it’s going to work—I believe it will. Thanks!

Looking at the OP image, I suggest a left padding on the items instead of text indent. :wink:

Nice. :slight_smile:


A very good idea. :winky:

I’ve now amended the codepen code
to implement your suggestion.