Trouble with overlapping elements in Tailwind CSS using pseudo-elements

Question

I have a question about this CSS I wrote with tailwind. I am trying to overlap the pseudo-element over the div but I can't find the way. How can do get this to work, and can it be written in a cleaner way?

<div class="absolute flex h-[15px] w-[15px] border-[15px] border-l-[25px] 
            border-solid border-transparent border-l-green-300 bg-transparent
            before:absolute before:h-[12px] before:w-[12px] before:border-[12px]
            before:border-l-[20px] before:border-solid before:border-transparent 
            before:border-l-pink-300 before:bg-transparent">
</div>

This is other option I tried to write it cleaner but idk why it doesn't work :(

<div class=`${div-triangle}${pseudo-triangle}`></div>
<script>
    let div-triangle = 'absolute flex h-[15px] w-[15px] border-[15px] border-l-[25px] 
                        border-solid border transparent border-l-green-300 bg-transparent';
    let pseudo-triangle = 'before:absolute before:h-[12px] before:w-[12px] before:border-[12px] 
                           before:border-l-[20px] before:border-solid before:border-transparent 
                           before:border-l-pink-300 before:bg-transparent';
</script>

How did you want the pseudo element to overlap? Also, a subjectively cleaner way could be to use another element inside the <div> instead of a pseudo element – since this would mean you could use classes without the before: variant on this inner element, which could mean that these classes would be reused elsewhere in the project, thus reducing the amount of CSS rules and thus reducing potential CSS file size. — Wongjn
– Wongjn, Commented May 28, 2023 at 8:50

jme11 · Accepted Answer · 2023-05-28 19:29:57Z

Use two pseudo elements. The outer element has position relative to anchor both the before and after elements, which are positioned absolute within the containing element.

<script src="https://cdn.tailwindcss.com"></script>


<main class="p-2">
  <div class="relative flex items-center h-[25px] before:absolute before:h-[15px] before:w-[15px] before:border-[15px] before:border-l-[25px] before:border-solid before:border-transparent before:border-l-green-300 before:bg-transparent after:absolute after:h-[12px] after:w-[12px] after:border-[12px] after:border-l-[20px] after:border-solid after:border-transparent after:border-l-pink-300 after:bg-transparent"></div>

<!-- Adjust the top/left/bottom/right properties of the after element to control the placement of the element on top: -->

  <div class="relative flex items-center h-[25px] before:absolute before:h-[15px] before:w-[15px] before:border-[15px] before:border-l-[25px] before:border-solid before:border-transparent before:border-l-green-300 before:bg-transparent after:absolute after:h-[12px] after:w-[12px] after:border-[12px] after:border-l-[20px] after:border-solid after:border-transparent after:border-l-pink-300 after:bg-transparent after:left-1"></div>
</main>

Collectives™ on Stack Overflow

Trouble with overlapping elements in Tailwind CSS using pseudo-elements

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related