CSS3 границы сверху появляется слева по наведению

Question

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

Я пытался несколько раз только появляется unsuccesfully..It, но не так, как я хочу. Последний CSS У меня есть это одна:

#navHead li { 
 
    list-style: none; 
 
    display: inline-block; 
 
    margin-left: 1em; 
 
} 
 
.slideBorder { 
 
    text-decoration: none; 
 
    text-transform: uppercase; 
 
    color: #7f7f7f; 
 
    padding: 0.5em; 
 
    border-top: 2px solid transparent; 
 
    width: 0px; 
 
    -webkit-transition: 1s ease; 
 
    -moz-transition: 1s ease; 
 
    -o-transition: 1s ease; 
 
    o-transition: 1s ease; 
 
} 
 
.slideBorder:hover { 
 
    border-top: 2px solid #1fda9a; 
 
    width: 100%; 
 
}

<ul id="navHead"> 
 
    <li><a class="slideBorder" href="#">hi</a> 
 
    </li> 
 
    <li><a class="slideBorder" href="#">hi</a> 
 
    </li> 
 
    <li><a class="slideBorder" href="#">hi</a> 
 
    </li> 
 
</ul>

Может кто-нибудь мне помочь, пожалуйста?

Благодаря

Answer 1

Вы не можете анимировать границу, как это, но вы можете использовать псевдо-элемент вместо этого.

#navHead li { 
 
    list-style: none; 
 
    display: inline-block; 
 
    margin-left: 1em; 
 
} 
 
.slideBorder { 
 
    text-decoration: none; 
 
    text-transform: uppercase; 
 
    color: #7f7f7f; 
 
    padding: 0.5em; 
 
    position: relative; 
 
} 
 
.slideBorder:after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 0; 
 
    height: 3px; 
 
    background: #f00; 
 
    transition: width 0.5s ease; 
 
} 
 
.slideBorder:hover:after { 
 
    width: 100%; 
 
}

<ul id="navHead"> 
 
    <li><a class="slideBorder" href="#">hi</a> 
 

 
    </li> 
 
    <li><a class="slideBorder" href="#">hi</a> 
 

 
    </li> 
 
    <li><a class="slideBorder" href="#">hi</a> 
 

 
    </li> 
 
</ul>