Hover effect doodad

https://emilkowalski.github.io/css-effects-snippets/

src/sass/screen.scss

@@ -1,3 +1,5 @@
+$primaryColor: #00ADFF;
+
 *, *::before, *::after {
     box-sizing: inherit;
 }
@@ -88,7 +90,7 @@ footer > a {
     padding: 0.5rem;
 }
 h1 {
-    color: #00ADFF;
+    color: $primaryColor;
 }
 img {
   max-width: 100%;
@@ -182,14 +184,40 @@ nav > * {
   padding-left: 2em;
   padding-right: 2em;
   border-left: 2px solid black;
+  display: inline-block;
+  position: relative;
+  color: white !important;
 }
 nav :first-child {
   padding-left: 0;
   border-left: none;
 }
-nav a:hover {
-  color: white;
+nav > *::after {
+content: '';
+    position: absolute;
+    height: 2px;
+    width: 100%;
+    left: 0;
+    bottom: 0;
+    opacity: 0;
+    transform: translateY(3px);
+    background: $primaryColor;
+    transition: opacity 0.2s ease, transform 0.2s ease;
 }
+nav a:hover {
+    color: $primaryColor;
+    text-decoration: none;
+}
+nav a:hover::after {
+opacity: 1;
+transform: translateY(0);
+}
+
+.borderFade:hover::after {
+    opacity: 1;
+    transform: translateY(0);
+}
+
 
 @media only screen and (max-width: 800px) {
     nav {