Add link hovers section

diff --git a/index.html b/index.html
index d7f0a9cba7de93f5db86263829a5cadd99bbdb14..07eb185f832484c34a5d1d112c7d67c6279467e1 100644 (file)
--- a/index.html
+++ b/index.html
@@ -303,6 +303,22 @@
       transform: translateX(4px);
       transition: transform 200ms;
     }
+
+    /* Link hovers */
+
+    .thick-underline {
+      font-size: 2rem;
+      color: inherit;
+      text-decoration: underline;
+      transition: color 600ms;
+    }
+
+    .thick-underline:hover,
+    .thick-underline:focus {
+      color: hsl(216deg 80% 40%);
+      text-decoration-thickness: 0.2em;
+      transition: color 200ms;
+    }
   </style>
   <link rel="icon" href="data:,">
   <title>css-loaders</title>
@@ -422,6 +438,12 @@
         <span>→</span>
       </button>
     </section>
+
+    <section>
+      <h1>Link hovers</h1>
+
+      <a href="https://example.com" class="thick-underline">Thick underline</a>
+    </section>
 </body>
 
 </html>
\ No newline at end of file