underline a link

nav a{
        color: black;
        text-decoration: none;
        margin: 6px;
        width: calc(100%/5);
        padding: 3px  4px  3px  5px ;
        line-height:1;
        
        display: inline-block;
        }
        
        nav{
            margin-top: 9px;
            margin-right: 18px;
            
            position: relative;
            width: 40%;
            height: 75%;
           display: flex;
           justify-content: center;
           margin: auto 10px;
        }

a{
    position:relative;
}

a::after{
content:"";
position: absolute;
width: 0;
right: 0;
height: 1px;
background-color: black;
transition: width .5s ease-in-out;
bottom:-2px;


}

a:hover::after{
    width: 100%;
}