밑줄 호버 효과에 전환 시간을 추가하는 방법

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

transpare 국경 바닥을 설정 처음 시도하지만, 밑줄이 여기 도와주세요 지연없이 가져가에 나타나는 것은 내 코드입니다 NT : 여기

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