Kevin Powell - Community•12mo ago

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

vinceOP•12mo ago

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

clevermissfox•12mo ago

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

Coder_Carl•12mo ago

I suggest just inserting 3 buttons though so that the user can press one to go to that page.

vinceOP•12mo ago

Thanks guys!

cubiq•12mo ago

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..

vinceOP•12mo ago

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

cubiq•12mo ago

sec

cubiq•12mo ago

background: radial-gradient(6.36% 50% at 87.85% 50%, #FFF 99.99%, transparent 100%), radial-gradient(6.36% 50% at 50% 50%, #FFF 99.99%, transparent 100%), radial-gradient(6.36% 50% at 12.66% 50%, #FFF 99.99%, transparent 100%), #F00;

background: radial-gradient(6.36% 50% at 87.85% 50%, #FFF 99.99%, transparent 100%), radial-gradient(6.36% 50% at 50% 50%, #FFF 99.99%, transparent 100%), radial-gradient(6.36% 50% at 12.66% 50%, #FFF 99.99%, transparent 100%), #F00;

i did this quickly in figma, you can obviously move the circles responsively but there's what i meant

cubiq•12mo ago

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

cubiq•12mo ago

some kind of this.. https://codepen.io/thecubiq/pen/JjzRqdV

Cubiq

CodePen

dots

...

cubiq•12mo ago

ive updated the demo, now just by defining the width, it shows the proper amount of those circles

cubiq•12mo ago

hope this helps <3

vinceOP•12mo ago

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 😅

cubiq•12mo ago

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

vinceOP•12mo ago

Lol I feel that, I just graduated in May and it took me til November to get a job I think I had around ~400 applications and I only got 2 interviews; the 2nd company to interview me hired me after talking to them for like an hour lol You'll find a job eventually just gotta keep grinding, try to build up a freelance portfolio if you can

clevermissfox•12mo ago

speaking of gradients, i think i just saw a comment from you on KPs latest video about how he couldve achieved those inverted pseudo elements with one raidal gradient, and replied asking if you had an example, then looked at your username and realized "hey i think i know them from discord". how would you set up on radial gradient to do that ? EDIT: Im experimenting with the codepen you linked but cant figure out how to make both the half circles in the respective corners transparent. Either the red takes over or the second color in the first gradient takes over.

background: radial-gradient(
    at 0 0,
    lime calc(25% - .5px), /*   antialiasing   */
    transparent 25% 75%
  ),
    
    radial-gradient(
    50% 50% at 0 100%,
      transparent calc(75% - .5px), red 75%
    );

background: radial-gradient(
    at 0 0,
    lime calc(25% - .5px), /*   antialiasing   */
    transparent 25% 75%
  ),
    
    radial-gradient(
    50% 50% at 0 100%,
      transparent calc(75% - .5px), red 75%
    );

cubiq•12mo ago

https://codepen.io/thecubiq/full/xxMaGqK there :)

Cubiq

CodePen

Glass Morphism 3D Card with BG Video

...

cubiq•12mo ago

i first found that approach there :) https://daisyui.com/components/tab/#sizes

Tailwind Tabs Component — Tailwind CSS Components ( version 4 updat...

Tailwind Tabs examples: Tabs can be used to show a list of links in a tabbed format. component

clevermissfox•12mo ago

Thanks , I’ll have to look at this on my computer to translate all the custom props to be able to grasp what’s going on. Appreciate it!!

vinceOP•12mo ago

Still need to look at @cubiq's solution but here's what I went with if anyone's curious:

window.addEventListener('load', () => {
  const slider = document.querySelector('bsp-listcarousel.QuoteListA');
  const listElements = document.querySelectorAll("bsp-listcarousel.QuoteListA ul li");
  const buttons = document.querySelectorAll("bsp-listcarousel.QuoteListA ul button");
  const circlesContainer = document.createElement('div');
  slider.appendChild(circlesContainer);
  circlesContainer.classList.add('circle-container');
  
  const appendSliderCircles = (container, count) => {
    for (let i = 0; i < count; i++) {
      const circle = document.createElement('div');
      circle.classList.add('circle');
      container.appendChild(circle);
    }
  }
  
  const updateActiveCircle = () => {
    const circles = document.querySelectorAll(".circle");
    circles.forEach((circle) => circle.classList.remove("active"));
    
    listElements.forEach((element, index) => {
      if (element.classList.contains("is-selected")) {
        circles[index].classList.add("active");
      }
    });
  }
  
  const observer = new MutationObserver(() => {
    updateActiveCircle();
  });

  const config = { attributes: true, attributeFilter: ['class'] };
    
  listElements.forEach((element) => observer.observe(element, config));  
  appendSliderCircles(circlesContainer, listElements.length);
});

window.addEventListener('load', () => {
  const slider = document.querySelector('bsp-listcarousel.QuoteListA');
  const listElements = document.querySelectorAll("bsp-listcarousel.QuoteListA ul li");
  const buttons = document.querySelectorAll("bsp-listcarousel.QuoteListA ul button");
  const circlesContainer = document.createElement('div');
  slider.appendChild(circlesContainer);
  circlesContainer.classList.add('circle-container');
  
  const appendSliderCircles = (container, count) => {
    for (let i = 0; i < count; i++) {
      const circle = document.createElement('div');
      circle.classList.add('circle');
      container.appendChild(circle);
    }
  }
  
  const updateActiveCircle = () => {
    const circles = document.querySelectorAll(".circle");
    circles.forEach((circle) => circle.classList.remove("active"));
    
    listElements.forEach((element, index) => {
      if (element.classList.contains("is-selected")) {
        circles[index].classList.add("active");
      }
    });
  }
  
  const observer = new MutationObserver(() => {
    updateActiveCircle();
  });

  const config = { attributes: true, attributeFilter: ['class'] };
    
  listElements.forEach((element) => observer.observe(element, config));  
  appendSliderCircles(circlesContainer, listElements.length);
});

I didn't implement anything for actually clicking the pagination dots, but it shouldn't be too hard. No time though haha

Gaming

Programming

Are 3 psuedo elements possible?