Are 3 psuedo elements possible?
What I'm trying to accomplish is the three circles on bottom that indicate what slider you're on. Only issue is that these indicators are not in the DOM and I can't modify the DOM. The first picture is what I want to accomplish, and the second is what I currently have.
I was thinking about some type of gradient nonsense but I don't know where to start with that or if that would even be a viable solution.
21 Replies
Ah I just realized I have access to JS so I can append this in JS.
Any boilerplate would be helpful if someone is able to spin it up quickly, if not I can grind this out a bit
You can only have one before and one after on any given element but you can use more than one element to create pseudo elements. A div and the body, two divs, a div and a heading , etc. depending on what you want it to be relative to
I suggest just inserting 3 buttons though so that the user can press one to go to that page.
Thanks guys!
i know it's kinda a workaround, but isn't 2 enough in this case? the three would be simple background image with 3 radial gradients and then the black one would be simply overlapping those and based on the position it would move to the right or to the left. idk.. maybe you just shouldn't use pseudos for this kind of behavior..
Can you explain your solution a bit more please? Gradients are completely new to me. And yes I completely agree that I shouldn't be using psuedo elements. I realized I can use JS to append to the DOM so trying that now
sec
i did this quickly in figma, you can obviously move the circles responsively but there's what i meant
if you are feeling brave enough, you could use the trigonometry math to determine the sin pos of each circle based on the number of the dots xd fully with just css
or even better, using the dot as a pattern and then repeating these based on the width
ive updated the demo, now just by defining the width, it shows the proper amount of those circles
hope this helps <3
Thank you so much @cubiq ! I'll have to take a look at this tonight or over the weekend - I am absolutely spent right now 😅
that is more than understandable, I (as an unemployed mf) have kinda more free time than i would ever wanted to, but now when ai has kinda pushed the level of "talented" people to the sky, many employers are kinda scared of these people because they know that most of them aren't this good and now try to stand out :D after 7 years of webdev on my own, and especially now when ive graduated, it kinda hurts xd
but at least i have time to help people i guess xd