Underscore left to right when entering and exiting

Question

With the following code, I get the hover underline effect from left to right.

.underline { display: inline; position: relative; overflow: hidden; } .underline:after { content: ""; position: absolute; z-index: -1; left: 0; right: 100%; bottom: -5px; background: #000; height: 4px; transition-property: left right; transition-duration: 0.3s; transition-timing-function: ease-out; } .underline:hover:after, .underline:focus:after, .underline:active:after { right: 0; } 

 <p>hello, link is <a href="#" class="underline">underline</a> </p> 

When not in hover, the: after element returns to the left, the original state. Is there a way in which : after going to the right , and not to the left, when you leave the hang?

Answer 1

You can try animating the width instead of the right / left properties.

 .underline { display: inline; position: relative; overflow: hidden; } .underline:after { content: ""; position: absolute; z-index: -1; right: 0; width: 0; bottom: -5px; background: #000; height: 4px; transition-property: width; transition-duration: 0.3s; transition-timing-function: ease-out; } .underline:hover:after, .underline:focus:after, .underline:active:after { left: 0; right: auto; width: 100%; } 

 <p>hello, link is <a href="#" class="underline">underline</a></p> 

See this script for a working example: https://jsfiddle.net/1gyksyoa/

Answer 2

Based on this answer: Expand the bottom border on hover , you can change the transform-origin property on hover to achieve a “freeze” effect you are looking for. Here is an example:

 .expand{ position:relative; text-decoration:none; display:inline-block; } .expand:after { display:block; content: ''; border-bottom: solid 3px #000; transform: scaleX(0); transition: transform 250ms ease-in-out; transform-origin:100% 50% } .expand:hover:after { transform: scaleX(1); transform-origin:0 50%; } 

 Here is some dummy text <a href="#" class="expand">expand</a>