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…

https://codepen.io/coothead/full/gOMbMGK

…and its code…

https://codepen.io/coothead/pen/gOMbMGK

coothead

3 Likes

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:

2 Likes

A very good idea. :winky:

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

coothead

2 Likes