Fixed link animation

Author: vinitshahdeo

src/App.css

@@ -209,6 +209,38 @@ body {
   --offset: 180px;
 }
 
+.problems p a {
+  display: inline-block;
+  position: relative;
+  text-decoration: none;
+  color: inherit;
+  margin: 0 var(--spacing, 0px);
+  transition: margin 0.25s;
+}
+
+.problems p a svg {
+  width: 76px;
+  height: 40px;
+  position: absolute;
+  left: 50%;
+  bottom: 0;
+  transform: translate(-50%, 7px) translateZ(0);
+  fill: none;
+  stroke: var(--stroke, #bbc1e1);
+  stroke-linecap: round;
+  stroke-width: 2px;
+  stroke-dasharray: var(--offset, 69px) 278px;
+  stroke-dashoffset: 361px;
+  transition: stroke 0.25s ease var(--stroke-delay, 0s), stroke-dasharray 0.35s;
+}
+
+.problems p a svg:hover {
+  --spacing: 4px;
+  --stroke: #7d41e7;
+  --stroke-delay: 0.1s;
+  --offset: 180px;
+}
+
 .moon,
 .cube,
 .star-1,

src/App.js

@@ -15,8 +15,10 @@ function App() {
         <h1 className="title">#50DaysOfJavaScript</h1>
         <p className="description">
           A community-driven open-source initiative for elevating JavaScript
-          skills through daily, practical <a href="https://github.com/vinitshahdeo/JavaScript-Coding-Interview-Questions/blob/main/README.md#list-of-questions" target="_blank" rel="noreferrer">coding challenges</a> tailored to
-          real-world tasks, led by a supportive global community of developers.
+          skills through daily, practical
+          <span className='problems'>
+            <a href="https://github.com/vinitshahdeo/JavaScript-Coding-Interview-Questions/blob/main/README.md#list-of-questions" target="_blank" rel="noreferrer">coding challenges</a>
+          </span> tailored to real-world tasks, led by a supportive global community of developers.
         </p>
         <a
           href="https://github.com/vinitshahdeo/JavaScript-Coding-Interview-Questions/blob/main/50DaysOfJavaScript/README.md"