add growing

index.html

@@ -17,6 +17,7 @@
         <ul>
             <li><a class="slidinglink" href="#">Sliding Link</a></li>
             <li><a href="#" class="swappinlink" data-replace="See"><span>Go</span></a></li>
+            <li><a href="#" class="growinglink"> Cool </a></li>
         </ul>
         
      </div>

styles/style.css

@@ -43,6 +43,7 @@ a {
     width: 100%;
     left: 0;
 }
+
 .swappinlink::before {
     background-color: #54b3d6;
     height: 2px;
@@ -77,3 +78,26 @@ a {
 .swappinlink:hover span {
     transform: translate3d(-200%, 0, 0);
 }
+
+/**/
+.growinglink {
+    text-decoration: none;
+    position: relative;
+}
+
+.growinglink::before {
+    content: '';
+    background-color: hsla(196, 61%, 58%, .75);
+    position: absolute;
+    left: 0;
+    bottom: 3px;
+    width: 100%;
+    height: 4px;
+    z-index: -1;
+    transition: all .3s ease-in-out;
+}
+
+.growinglink:hover::before {
+    bottom: 0;
+    height: 100%;
+}