test new style underline

new underline effects text
.

Author: denzveloper

_layouts/default.html

@@ -27,10 +27,10 @@ <h1 class="site-name"><a href="{{ site.url }}/">{{ site.name }}</a></h1>
           </div>
 
           <nav>
-            <a href="{{ site.url }}/">Blog</a>
-            <a href="{{ site.url }}/logo">Logo</a>
-            <a href="{{ site.url }}/gallery">Gallery</a>
-            <a href="{{ site.url }}/about">About</a>
+            <a href="{{ site.url }}/" class="under">Blog</a>
+            <a href="{{ site.url }}/logo"  class="under">Logo</a>
+            <a href="{{ site.url }}/gallery" class="under">Gallery</a>
+            <a href="{{ site.url }}/about" class="under">About</a>
           </nav>
         </header>
       </div>

index.html

@@ -12,7 +12,7 @@ <h1><a href="{{ site.baseurl }}{{ post.url }}">{{ post.title }}</a></h1>
         {{ post.excerpt }}
       </div>
 
-      <a href="{{ site.baseurl }}{{ post.url }}" class="read-more">Read More</a>
+      <a href="{{ site.baseurl }}{{ post.url }}" class="read-more under">Read More</a>
     </article>
   {% endfor %}
 </div>
@@ -23,12 +23,12 @@ <h1><a href="{{ site.baseurl }}{{ post.url }}">{{ post.title }}</a></h1>
       Previous
     </a>
   {% else %}
-    <span class="previous">Previous</span>
+    <span class="previous under">Previous</span>
   {% endif %}
 	&nbsp;&middot;&nbsp;
   {% if paginator.next_page %}
     <a href="{{ paginator.next_page_path }}" class="next">Next</a>
   {% else %}
-    <span class="next ">Next</span>
+    <span class="next under">Next</span>
   {% endif %}
-</div>
+</div>

style.scss

@@ -50,7 +50,7 @@ h1 {
     color: inherit;
   }
   a:hover{
-    transition: 0.5s;
+    transition: 0.3s;
     transition-timing-function: cubic-bezier(0, 0.84, 0.19, 0.11);
     color: $white;
     background-color: $darkGray;
@@ -95,6 +95,30 @@ a {
   }
 }
 
+a.under{
+  display: inline-block;
+  position: relative;
+  text-decoration: none;
+}
+
+a.under:after{
+  content: '';
+  position: absolute;
+  width: 100%;
+  transform: scaleX(0);
+  height: 2px;
+  bottom: 0;
+  left: 0;
+  background-color: #0099ff;
+  transform-origin: bottom right;
+  transition: transform 0.25s ease-out;
+}
+
+a.under:hover:after{
+  transform: scaleX(1);
+  transform-origin: bottom left;
+}
+
 ul, ol {
   margin: 15px 0;
   padding-left: 30px;
@@ -332,7 +356,7 @@ footer {
   background-color: $darkGray;
 }
 .title:hover{
-  transition: 0.5s;
+  transition: 0.3s;
   transition-timing-function: cubic-bezier(0.01,-1.51,0,1);
   color: $gray;
   background-color: $lightGray;