use :after and :before

Author: bjohansebas

Diff for: apps/site/components/Common/Blockquote/index.module.css

@@ -20,10 +20,7 @@
   & cite {
     @apply font-regular
       text-base
-      not-italic;
-
-    &::before {
-      @apply content-['—_'];
-    }
+      not-italic
+      before:content-['—_'];
   }
 }

Diff for: apps/site/components/Common/Button/index.module.css

@@ -104,35 +104,29 @@
       bg-green-600/10
       text-white
       shadow-xs
+      before:absolute
+      before:top-0
+      before:right-0
+      before:left-0
+      before:-z-10
+      before:mx-auto
+      before:h-full
+      before:w-full
+      before:opacity-30
+      before:content-['']
+      after:absolute
+      after:-top-px
+      after:right-0
+      after:left-0
+      after:mx-auto
+      after:h-px
+      after:w-2/5
       after:bg-gradient-to-r
       after:from-green-600/0
       after:via-green-600
       after:to-green-600/0
       after:content-[''];
 
-    &::before {
-      @apply absolute
-        top-0
-        right-0
-        left-0
-        -z-10
-        mx-auto
-        h-full
-        w-full
-        opacity-30
-        content-[''];
-    }
-
-    &::after {
-      @apply absolute
-        -top-px
-        right-0
-        left-0
-        mx-auto
-        h-px
-        w-2/5;
-    }
-
     &[aria-disabled='true'] {
       @apply opacity-50;
     }

Diff for: apps/site/components/Common/GlowingBackdrop/index.module.css

@@ -7,21 +7,18 @@
     -z-10
     size-full
     opacity-50
+    after:absolute
+    after:inset-0
+    after:m-auto
+    after:aspect-square
+    after:w-[300px]
+    after:rounded-full
     after:bg-green-300
+    after:blur-[120px]
+    after:content-['']
     md:opacity-100
     dark:after:bg-green-700;
 
-  &::after {
-    @apply absolute
-      inset-0
-      m-auto
-      aspect-square
-      w-[300px]
-      rounded-full
-      blur-[120px]
-      content-[''];
-  }
-
   svg {
     @apply absolute
       inset-0

Diff for: apps/site/components/Common/Preview/index.module.css

@@ -10,19 +10,16 @@
     rounded-sm
     border
     border-neutral-900
-    bg-neutral-950;
-
-  &::after {
-    @apply absolute
-      inset-0
-      m-auto
-      aspect-square
-      w-1/3
-      rounded-full
-      blur-2xl
-      content-['']
-      @md/preview:blur-3xl;
-  }
+    bg-neutral-950
+    after:absolute
+    after:inset-0
+    after:m-auto
+    after:aspect-square
+    after:w-1/3
+    after:rounded-full
+    after:blur-2xl
+    after:content-['']
+    after:@md/preview:aspect-[1.90/1];
 
   &.announcements {
     @apply after:from-green-700/90;

Diff for: apps/site/components/Common/ProgressionSidebar/ProgressionSidebarGroup/index.module.css

@@ -15,42 +15,33 @@
       flex
       flex-col
       gap-2
+      after:absolute
+      after:top-0
+      after:left-[0.45rem]
+      after:z-10
+      after:h-full
+      after:w-px
       after:bg-neutral-200
+      after:content-['']
       dark:after:bg-neutral-800;
 
-    &::after {
-      @apply absolute
-        top-0
-        left-[0.45rem]
-        z-10
-        h-full
-        w-px
-        content-[''];
-    }
-
     a {
-      @apply first:before:bg-white
+      @apply first:before:absolute
+        first:before:bottom-[calc(50%+0.25rem)]
+        first:before:left-0
+        first:before:h-20
+        first:before:w-4
+        first:before:bg-white
+        first:before:content-['']
+        last:after:absolute
+        last:after:top-[calc(50%+0.25rem)]
+        last:after:left-0
+        last:after:h-20
+        last:after:w-4
         last:after:bg-white
+        last:after:content-['']
         first:dark:before:bg-neutral-950
         last:dark:after:bg-neutral-950;
-
-      &:first-child::before {
-        @apply absolute
-          bottom-[calc(50%+0.25rem)]
-          left-0
-          h-20
-          w-4
-          content-[''];
-      }
-
-      &:last-child::after {
-        @apply absolute
-          top-[calc(50%+0.25rem)]
-          left-0
-          h-20
-          w-4
-          content-[''];
-      }
     }
   }
 }

Diff for: apps/site/styles/effects.css

@@ -17,28 +17,25 @@
     absolute
     z-10
     translate-x-0
-    translate-y-0;
+    translate-y-0
+    after:absolute
+    after:top-[20%]
+    after:-left-full
+    after:-z-10
+    after:block
+    after:h-36
+    after:w-36
+    after:-rotate-90
+    after:bg-[url('/static/images/turtle.png')]
+    after:opacity-[0.15]
+    after:content-['']
+    after:select-none
+    after:md:top-1/2
+    after:md:-left-1/2;
 
   & img {
     @apply h-auto
     w-24
     md:w-48;
   }
-
-  &::after {
-    @apply absolute
-    top-[20%]
-    -left-full
-    -z-10
-    block
-    h-36
-    w-36
-    -rotate-90
-    bg-[url('/static/images/smoke.gif')]
-    opacity-[0.15]
-    content-['']
-    select-none
-    md:top-1/2
-    md:-left-1/2;
-  }
 }