Adding image with pseudo before yay/nah (verdict: nah)

So the image is what i want to achieve. I'm using a pseudo selector before to add an image and set it to absolute and then push the text with a padding-left. Would this be considered bad practise? https://codepen.io/symisz/pen/gOZbGYP I kinda like how clean the HTML is this way, but adding a padding left seems iffy to me.
No description
6 Replies
Chooβ™šπ•‚π•šπ•Ÿπ•˜
That seems like clean code when you use fixed values, but it will get very messy if you have to pull the image URL from a database and need to dynamically update it in the background image of the before pseudoelement. It gets especially bad if you have an indefinite number of these. You would need a different before on each one, since they would have different images.
symisz
symiszOPβ€’16mo ago
that's a good point, i'll just revert to adding the picture in the list then, easier to maintain dynamically.
Mannix
Mannixβ€’16mo ago
if you don't like your solution you can use grid https://codepen.io/MannixMD/pen/oNJgGPb
symisz
symiszOPβ€’16mo ago
yea, much cleaner using grid! thnx for the suggestion
Mannix
Mannixβ€’16mo ago
thumbup
symisz
symiszOPβ€’16mo ago
oeff, i made a huge error, nesting list like i had. here is an update of what i wanted to achieve. https://codepen.io/symisz/pen/xxmbWgO
Want results from more Discord servers?
Add your server