html - 如何为下划线悬停效果添加过渡时间

Question

好的，我要问的真的很蹩脚（我知道很多css），但这是我的问题-我有一些文本，我想在悬停时加下划线，但下划线会立即出现在悬停上，请帮助这里是我的代码 -

#full{
top: 0px;
left: 0px;
width: 100%;
height: auto;
-webkit-transition: all 0.5s ease;
}

    #full > #header{
        top: 0px;
        width: 100%;
        height: 50px;
        background: #e25959;
        position: fixed;
        -webkit-transition: all 0.5s ease;
    }
    #full > #header > .link{
        position: relative;
        float: right;
        color: #fff;
        margin: 15px;
        -webkit-transition: all 0.5s ease;
    }
    #full > #header > .link:hover{
        border-bottom: 1px solid #fff;
        cursor: default;
    }

和我的 html -

<div id="full">
    <div id="header">
        <div class="link">MY WORK</div>
        <div class="link">ABOUT ME</div>
        <div class="link">HOME</div>
    </div>
</div>

Answer 1

尝试最初将边框底部设置为透明：

#full > #header > .link{
    position: relative;
    float: right;
    color: #fff;
    margin: 15px;
    -webkit-transition: all 0.5s ease;
    border-bottom: 1px solid transparent;  /* <------ */
}

这是一个例子，http://jsfiddle.net/wf3fc/3/

Answer 2

做这个：

#full > #header > .link {
    position: relative;
    float: right;
    color: #fff;
    margin: 15px;
    border-bottom: 1px solid rgba(0,0,0,0);
    -webkit-transition: all 0.5s ease 0s;
}
#full > #header > .link:hover {
    border-bottom-color: #fff;
    cursor: default;
}