鼠标悬停下划线过渡出现粗边框问题及TailwindCSS适配方案

问题描述 #

我想给菜单项实现下划线过渡效果，参考了Stack Overflow上的方案，但拆分border-bottom属性编写CSS后，出现边框过粗且部分提前显示的问题。由于使用TailwindCSS无法使用border-bottom简写属性，需采用拆分写法，期望达到原方案的效果。

原参考方案代码 #

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>

我的实现代码 #

a { text-decoration: none; display: inline-block; }
a:after {
    content: '';
    display: block;
    width: 0px;
    border-bottom-width: 1px;
    border-style: solid;
    border-color: rgb(21 19 25);
   -webkit-transition: 0.5s ease;
            transition: 0.5s ease;
}
a:hover:after { width: 100%; }

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

适配TailwindCSS的解决方案代码 #

@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-[''];

内容的提问来源于stack exchange，提问作者ElbartoTn