Подчеркнуть переход css3

Ответ 1

Это был очень сложный вопрос.

Единственное решение, которое я могу придумать, - это переход border-bottom на :hover, или я должен сказать, что я перехожу к border-bottom, width и margin-right, чтобы показать border-bottom и в то же время сохранить в этом случае выровненные ссылки.

Трудно объяснить, поэтому я сделал быстрый пример, который не идеален и выглядит немного грязным, но по крайней мере он показывает, что я имею в виду.: -)

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