Underline transitions on hover give thick border-CodePudding

I am trying to create an underline transition for my menu items. I followed the answer on this post but with small difference : On the answer it uses for setting the border 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>

For my example i'm using :

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>

While this should give the same result, i'm getting a thicker border and part of it is already displayed

I need to use second example syntax as i'm using Tailwindcss and can't find a way to use border-bottom shorthand with different properties, i expect to get the same result as the first example

Update : In addition to the accepted answer, this is how to make it work with tailwindCSS, this is the translated answer from css to 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-[''];

CodePudding user response：

Below you have a working solution with the same result as your first snippet.

I am not familiar with Tailwindcss, but replacing these might work for you:

border-style with border-bottom-style
border-color with 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>