悬停时跳过下划线，同时避免包装文字

我正在尝试为我的菜单项创建下划线过渡。在悬停时，我需要一个漂亮的蓝色下划线，从左到右。我遵循this post的答案。悬停时跳过下划线，同时避免包装文字

它的工作原理，但唯一的问题是，因为此方法将我的li元素的宽度设置为0，所以我的较长菜单项会被换成两行而不是一行。这正是该解决方案的注释者（CBroe）所警告的问题。他/她建议使用：after在每个菜单项后面生成一个元素，并将生成的元素放置在链接下。这样，我可以扩展和收缩生成的元素的宽度，而我的菜单项本身不会被包装。

任何想法如何做到这一点？如果这是令人困惑的，我很抱歉，我尽力了。

来源

2013-04-26 adrianmc

我究竟要手动插入每个项目下的股利和修改，而不是，但tborychowski的回答完美的作品！ – adrianmc 2013-04-26 09:48:30

我更新了演示here

，这是CSS：

a { text-decoration: none; display: inline-block; } 
a:after { 
    content: ''; 
    display: block; 
    border-bottom: 1px solid blue; 
    width: 0; 
    -webkit-transition: 0.5s ease; 
      transition: 0.5s ease; 
} 
a:hover:after { width: 100%; }

来源

2013-04-26 09:38:03 tborychowski

谢谢！这很好用！ – adrianmc 2013-04-26 09:47:51

悬停时跳过下划线，同时避免包装文字

回答

相关问题