From 3e9e9508d1d8df4ca64359732f77ecb763b103cb Mon Sep 17 00:00:00 2001
From: Ardis Lu <ardisglu@gmail.com>
Date: Fri, 27 Oct 2023 21:36:38 -0700
Subject: [PATCH] Use pseudo-element for arrow

---
 index.html | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/index.html b/index.html
index 3639602..a8d5330 100644
--- a/index.html
+++ b/index.html
@@ -294,12 +294,14 @@
       cursor: pointer;
     }
 
-    button span {
+    .arrow-movement::after {
+      content: "→";
       display: inline-block;
+      margin-inline-start: 4px;
       transition: transform 400ms;
     }
 
-    :is(button:hover, button:focus) span {
+    :is(.arrow-movement:hover, .arrow-movement:focus)::after {
       transform: translateX(4px);
       transition: transform 200ms;
     }
@@ -466,10 +468,7 @@
     <section>
       <h1>Button hovers</h1>
 
-      <button>
-        Arrow movement
-        <span>→</span>
-      </button>
+      <button class="arrow-movement">Arrow movement</button>
 
       <button class="gradient-shadow">Gradient drop shadow</button>
     </section>
-- 
2.47.3