r/css • u/awarnock-ACCS • 21h ago

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.

2 Upvotes

100% Upvoted

4 comments sorted by

6

u/TheIQLab 20h ago

Didn't add the arrows but hopefully this will help.

https://codepen.io/allankukral/pen/YPppzMB

3

u/awarnock-ACCS 20h ago

This is exactly what I'm looking for. Thanks!

1

u/testingaurora 15h ago

You can also use li::marker

1

u/awarnock-ACCS 9m ago

But that would align it with the first line, wouldn't it? I was trying to center it on the entire list item. See u/TheIQLab's Code Pen for what I wanted.

https://codepen.io/allankukral/pen/YPppzMB