Modify summary details ::marked to ::before

JoyWonderful · Dec 3, 2023 · 73f5116 · 73f5116
1 parent 1bd4c27
commit 73f5116
Showing 1 changed file with 18 additions and 11 deletions.
diff --git a/css/main.css b/css/main.css
@@ -184,17 +184,6 @@ body {
   font-weight: 900;
   color: #000000;
 }
-summary {
-  cursor: pointer;
-}
-summary::marker {
-  font-family: 'Font Awesome 6 Free';
-  content: '\f0da\0020\0020';
-  color: #707070;
-}
-details[open]>summary::marker {
-  content: '\f0d7\0020\0020';
-}
 body {
   background: var(--body-bg-color);
   box-sizing: border-box;
@@ -3019,6 +3008,24 @@ h2, h3, h4, h5, h6
     border-radius: 15%;
 }
 
+summary {
+  cursor: pointer;
+  position: relative;
+}
+summary::marker {
+  content: none;
+}
+summary::before {
+  font-family:'Font Awesome 6 Free';
+  content: '\f0da';
+  transform: rotate(0deg);
+  position: absolute;
+  right: .5em;
+  transition: transform .3s;
+}
+details[open]>summary::before {
+  transform: rotate(90deg);
+}
 details {
     border: 1px solid #aaa;
     border-radius: 4px;