Search code examples
csscss-transitionsunderline

Underline css3 transition

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

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