悬停时下划线转换，同时避免包装文本

Question

我正在尝试为菜单项创建下划线转换。在悬停时，我想要一个漂亮的蓝色下划线从左到右开始。我按照this post中的回答。

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

知道怎么做吗？如果这令人困惑，我很抱歉，我尽我所能。

Answer 1

我更新了演示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%; }