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

最初に border-bottom を透明に設定してみてください:

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