App: update link styles to match spec

2020-07-31 19:52:57 -04:00
parent 4b927d746d
commit 847d80e7eb
4 changed files with 45 additions and 23 deletions
--- a/src/components/NavBar/NavBar.css
+++ b/src/components/NavBar/NavBar.css
@@ -39,16 +39,26 @@ nav > div {
  text-align: end;
 }

-.links a {
-  color: black;
-  text-decoration: none;
-}
-
-.links a:hover {
-  /* border-bottom: 2px solid black; */
-  box-shadow: 0 2px 0px -1px black;
-}
-
 .links a:not(:first-child) {
  margin-left: 48px;
 }
+
+a.nav-link {
+  text-decoration: none;
+  position: relative;
+  color: black;
+}
+
+a.nav-link:after {
+  content: '';
+  position: absolute;
+  bottom: -2px;
+  left: 0;
+  width: 0%;
+  border-bottom: 1px solid black;
+  transition: 0.2s;
+}
+
+a.nav-link:hover:after {
+  width: 100%;
+}