Align and animate expandable items (details, menu)

assets/_main.scss

@@ -143,11 +143,11 @@ a .book-icon {
   input.toggle + label::after {
     content: "▸";
     align-self: center;
+    transition: transform 0.1s ease-in-out;
   }
 
   input.toggle:checked + label::after {
-    content: "▾";
+    transform: rotate(90deg);
-    align-self: center;
   }
 }
 
@@ -158,7 +158,7 @@ body[dir="rtl"] .book-menu {
   }
 
   input.toggle:checked + label::after {
-    content: "▾";
+    transform: rotate(-90deg);
   }
 }
 

assets/_markdown.scss

@@ -186,10 +186,22 @@
       padding: $padding-16;
       margin: -$padding-16;
       cursor: pointer;
+      list-style: none;
+
+      &::before {
+        content: "▸"; 
+        display: inline-block;
+        margin-inline-end: $padding-8;
+        transition: transform 0.1s ease-in-out;
+      }
     }
 
     &[open] summary {
       margin-bottom: 0;
+
+      &::before {
+        transform: rotate(90deg);
+      }
     }
   }