css - 悬停时在过渡下划线，同时避免环绕文本

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