feat(style): Add highlight transition

src/features/shared/components/ExternalLink.tsx

@@ -14,7 +14,7 @@ const ExternalLink: FunctionComponent<ExternalLinkProps> = ({
 }) => {
   return (
     <a
-      className={`hashtag ${classNames}`}
+      className={`highlighter ${classNames}`}
       href={href}
       rel="noopener noreferrer"
       target="_blank"

src/features/styles/common.scss

@@ -205,6 +205,29 @@ $target: #e73c7e;
   font-size: small;
 }
 
+.highlighter {
+  display: inline-block;
+  color: $highlight-color;
+  line-height: 1.1;
+
+  &::after {
+    content: '';
+    display: block;
+    height: 1px;
+    background-color: $highlight-color;
+    transition: width 0.5s ease;
+    width: 0;
+  }
+
+  &:hover {
+    cursor: pointer;
+
+    &::after {
+      width: 100%;
+    }
+  }
+}
+
 .progress {
   display: flex;
   flex-direction: column;

src/features/styles/markdown/index.scss

@@ -24,12 +24,11 @@
 
   a {
     color: $highlight-color;
-  }
 
-  a:hover,
-  summary:hover {
-    text-decoration-line: underline;
-    cursor: pointer;
+    &:hover {
+      cursor: pointer;
+      text-decoration: underline;
+    }
   }
 
   u {

src/features/styles/ui/about/index.scss

@@ -200,11 +200,10 @@
         }
 
         .link {
-          color: #28b592;
+          color: #21997b;
 
           &:hover {
             color: $highlight-color;
-            text-decoration-line: underline;
           }
         }
       }

src/features/styles/ui/navigation.scss

@@ -54,6 +54,7 @@
 
   ::-webkit-progress-value {
     background-color: #28bc97;
+    transition: width 0.3s ease-out;
   }
 }