我有一個關于我用tailwind寫的CSS的問題。我試圖在div上重疊偽元素，但是我找不到方法。怎樣才能讓它工作，能不能用一種更簡潔的方式寫出來？

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

這是另一個選項，我試著寫得更干凈，但idk為什么它不工作:(

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

使用兩個偽元素。外部元素具有相對于錨定之前和之后元素的位置，這兩個元素在包含元素內絕對定位。

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