hover 上的下划线过渡会产生粗边框

Question

我正在尝试为我的菜单项创建下划线过渡。 我遵循了这篇文章的答案，但差别很小：在它用于设置边框的答案 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>

对于我的示例，我正在使用：

 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 并且找不到使用具有不同属性的 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-[''];

Answer 1

下面您有一个工作解决方案，其结果与您的第一个代码段相同。

我不熟悉 Tailwindcss，但替换这些可能对你有用：

• border-style与border-bottom-style
• border-color和border-bottom-color

 a { text-decoration: none; display: inline-block; } a:after { content: ''; display: block; width: 0px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-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>