我正在尝试为我的菜单项创建下划线过渡。我按照this post上的答案，但有一个小的区别：在回答它用于设置边界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%; }

<a>A link with an animated bottom border</a>

对于我的例子，我使用：
一个二个一个一个
虽然这应该给出相同的结果，我得到了一个较厚的边界，它的一部分已经显示
我需要使用第二个示例语法，因为我正在使用Tailwindcss，并且找不到一种方法来使用不同属性的border-bottom速记，我希望得到与第一个示例相同的结果

• • 更新：**除了已接受的答案，这是如何使其与tailwindCSS一起工作，这是从css到Tailwind的翻译答案

@apply after:block
    after:w-0 
    after:border-0
    after:border-b
    after:border-solid
    after:border-b-blue 
    after:transition-all 
    after:duration-200 
    after:ease-linear
    after:content-[''];