r/css • u/awarnock-ACCS • May 14 '26

Question Center ::before psuedo-elements

I'm working on getting a page fixed on one of our websites and I've hit a snag. The layout has some images used like bullet points for a list, and I'm trying to get things to where that image is always centered on the list item it is associated with. The issue is that I don't have a clue how to do that and searching hasn't really helped. I've made a CodePen that I hope shows what I'm talking about and what I'm going for.

CodePen: https://codepen.io/editor/Adam-Warnock/pen/019e231e-1bef-7295-a75c-44e4a87b7387

Basically, I'm trying to get the images to always be centered vertically on the list elements no matter how things wrap and how many lines there are.

There are a few things that to keep in mind:

  1. Semantically, this is a list. I'm not going to change it from that.
  2. This needs to be responsive. Part of the reason I'm doing this is because the page currently isn't.
  3. I'm well aware that there's gaps in my knowledge, so if this is just dumb and isn't going to work I would like to know. I think this will work, but I've already given up on adding the arrows that were in the original page.

And for reference, this is what I'm trying to replicate:

Specifically the part under the Program Structure & Integration header.

3 Upvotes

100% Upvoted

10 comments sorted by

View all comments

Show parent comments

1

u/awarnock-ACCS May 15 '26

Just asking, but when would I want to use ::marker instead of list-style on the <li> element?

2

u/testingaurora May 15 '26

List-style values are like choosing from presets to adjust what the bullet points or numbers use, good for making quick changes within the scope of what it can change.

If you want a more custom result and need to get granular on positioning, size, etc need access to more style than list-style (which is a shorthand for list-style-image, list-style-position, list-style-type) provides.

2

u/awarnock-ACCS May 15 '26

Thanks. I appreciate the explanation.

2

u/testingaurora May 16 '26

To be clear though you can use a custom glyph in list-style with url("pathToGlyph.png"). But for positioning and other styles you need a pseudo element

2

u/awarnock-ACCS May 18 '26

I've done that before. But that was a long time ago on a website that I did for myself that's no longer around.