单击下划线动画

Question

I'm trying to recreate the animation on description and review here . The underline animates from right to left when the link is unclicked the underline animates from left to right before it disappears.

 a { color:#00f; text-decoration:none; display:inline-block; } a:after { width: 0; display:block; background:#00f; height:3px; transition: all .5s ease-in-out; content:""; } a:hover { color:#00f; } a:hover:after { width:100%; } 

 <a href="#">Click first</a> <a href="#">Click second</a> 

Answer 1

1. Use position on the pseudoelement. Add position: relative to a , and position: absolute to :after .

2. Position the pseudoelement using bottom and right . This means the line originates from the right side.

3. On hover/click, add the left property. This makes the line span the full width. The width grows from 0 to 100% from left to right.

When you 'unhover' or click again, left is removed, and the line originates from the right again, so the width decreases in that direction.

 $('a').on('click', function() { $('a').not(this).removeClass('underline'); $(this).toggleClass('underline'); }); 

 a { color: #00f; text-decoration: none; display: inline-block; position: relative; } a:after { width: 0; background: #00f; height: 3px; transition: all .5s ease-in-out; content: ""; position: absolute; bottom: -5px; right: 0; } a.underline:after { width: 100%; left: 0; } a:hover:after { width: 100%; left: 0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="#">Click first</a> <a href="#">Click second</a> 

Answer 2

Maybe you want a HTML/CSS only solution:

 a { color: #00f; text-decoration: none; display: inline-block; } a span:after { width: 0; display: block; background: #00f; height: 3px; transition: all .5s ease-in-out; content: ""; float: right; } a span:focus { color: #00f; } label:hover { cursor: pointer; } label input { display: none; } label input:checked + span:after, label input + span:hover:after { width: 100%; float: left; } label input:checked + span { color: #00f; } 

 <a href="#"> <label> <input type="radio" name="link" /> <span> Click first </span> </label> </a> <a href="#"> <label> <input type="radio" name="link" /> <span> Click second </span> </label> </a> 

Answer 3

You can use the following. Just use a class to set style.

 $('a').click(function(e){ $(this).siblings().removeClass('start'); $(this).toggleClass('start'); e.preventDefault(); }) 

 a { color:#00f; text-decoration:none; display:inline-block; } a:after { width: 0; display:block; background:#00f; height:3px; transition: all .5s ease-in-out; content:""; float:right; } a:hover { color:#00f; } a.start:after { width: 100%; } a:hover:after { width: 100%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="#">Click first</a> <a href="#">Click second</a>