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

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