Add an animation to the nav underline on hover

compgeolab · Oct 11, 2023 · d322f48 · d322f48
1 parent 959fff5
commit d322f48
Showing 1 changed file with 21 additions and 4 deletions.
diff --git a/css/style.css b/css/style.css
@@ -139,20 +139,37 @@ footer a:hover {
 
 nav a {
   color: var(--color-light);
+  border-bottom: none;
   text-decoration: none;
-  display: block;
-  border-bottom: 2px solid transparent;
 }
 
 nav a:hover {
   color: var(--color-light);
+  border-bottom: none;
   text-decoration: none;
-  border-bottom: 2px solid var(--color-light);
 }
 
 nav a.active {
-  border-bottom: 2px solid var(--color-light);
   text-decoration: none;
+  border-bottom: 2px solid var(--color-light);
+}
+
+nav a::after{
+  content: "";
+  display: block;
+  width: 100%;
+  height: 2px;
+  background: var(--color-light);
+  transition: transform 0.2s ease-in-out;
+  transform: scale(0);
+}
+
+nav a:hover::after {
+  transform: scale(1);
+}
+
+nav a.active:hover::after {
+  transform: scale(0);
 }
 
 figcaption {