如何在水平導航項下從左至右設置動畫邊框

Question

我喜歡在懸停時從左至右的水平導航中設置邊框的動畫效果。我能找到的最接近的例子是這裏的：http://css-tricks.com/examples/MagicLine/但它不是我想要的。

我只想懸停，並有一個下劃線只是從左到右繪製。

感謝您的任何建議。

Answer 1

<div class="menuitem"> 
    Menu Item 
    <span></span> 
</div> 

CSS：

.menuitem { 
    position: relative; 
    display: inline-block; 
    width: 80px; 
    height: 32px; 
    text-align: center; 
    background: #FFE; 
    cursor: pointer; 
} 
.menuitem span { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 0%; 
    height: 3px; 
    background: #000; 
    transition: all 0.6s; 
} 
.menuitem:hover span { 
    width: 100%; 
} 

http://jsfiddle.net/samliew/QUMgy/

Answer 2

其他解決方法可能是：

1) Make another element say a div and place it below the Nav bar. 
2) Animate the that div when user hovers over any of the menu items. 
3) And animate back when the pointer moves out of the navigation bar's parent. 

這是我能想到的最簡單的事情。

Answer 3

試試這個CSS

.menuitem { 
    display: inline-block; 
} 
.menuitem:after { 
    content: ''; 
    display: block; 
    height: 3px; 
    width: 0; 
    background: transparent; 
    transition: width .5s ease, background-color .5s ease; 
} 
.menuitem:hover:after { 
    width: 100%; 
    background: blue; 
} 

Live Demo

Answer 4

a { 
 
    text-decoration: none; 
 
    position: relative; 
 
    color: grey; 
 
    padding: 4px; 
 
    font-size: 2rem; 
 
    font-weight: bold; 
 
} 
 
a:after { 
 
    content: ''; 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    width: 0%; 
 
    border-bottom: 5px solid red; 
 
    transition: 0.5s; 
 
} 
 
a:hover:after { 
 
    width: 100%; 
 
}

<a href ="#">Test Link</a>