Underline css3 transition

css, css-transitions, underline

Solution

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;
}

Problem

Original source