Improve masthead links' hover state

2016-03-24 15:46:06 -04:00 · 2016-03-24 15:46:06 -04:00 · 62109b7f0a
parent 83c74a1c40
commit 62109b7f0a
2 changed files with 16 additions and 2 deletions
--- a/assets/_scss/_navigation.scss
+++ b/assets/_scss/_navigation.scss
@ -132,11 +132,25 @@
    }

    a {
-      border-bottom: 4px solid transparent;
+      position: relative;
+
+      &:before {
+        content: "";
+        position: absolute;
+        bottom: 0;
+        height: 4px;
+        background: $light-gray;
+        width: 0;
+        transition: 0.3s;
+      }

      &:hover {
        color: #000;
        border-bottom-color: $border-color;
+
+        &:before {
+          width: 100%;
+        }
      }
    }
  }
--- a/assets/css/main.css
+++ b/assets/css/main.css