Underline css3 transition [closed]

Question

It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.

Closed 9 years ago.

How do I create an underline animation from left to right on hover in CSS3?

Answer 1

This was a really tricky question.

The only solution I can come up with is to transition a border-bottom on :hover or I should actually say that I'm transitioning border-bottom, width and margin-right to make the border-bottom appear and at the same time keep, in this case, the links aligned.

Hard to explain, so I made a quick example which isn't perfect and looks a bit messy, but at least it shows how I mean. :-)

FIDDLE

HTML

<a href="#">Link</a><a href="#">Link</a>

CSS

a {
    text-decoration: none;
    display: inline-block;
    border-bottom: 1px solid blue;    
    margin-right: 39px; 
    width: 0px;
    -webkit-transition: 0.5s ease;
            transition: 0.5s ease;
}

a:hover {
    -webkit-transition: 0.5s ease;
            transition: 0.5s ease;
    border-bottom: 1px solid blue;
    width: 30px;
    margin-right: 9px;
}