css - 悬停时下划线过渡，同时避免换行

Question

我正在尝试为我的菜单项创建下划线过渡。悬停时，我想要一个漂亮的蓝色下划线从左到右开始。我遵循了这篇文章中的答案。

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

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

Answer 1

我在这里更新了演示

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