underline a link

Hi everyone I'm trying since some days to add underline animation on a link I get this (Picture) I want the underline only under the world not under the cell my css code:
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%;
}
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%;
}
thanks by advance.
8 Replies
Unknown User
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
Pat66
Pat66•2y ago
I'm a french-man sorry for my english look the picture the underline is not under the world that why is too long
Unknown User
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
Pat66
Pat66•2y ago
max-content don't change anything 😩
glutonium
glutonium•2y ago
well, rather then giving underline to <a> wrap the words in <span> and then give that span an underline should just work so in html it should look like <a><span>service</span></a> in css
span::after {
content:"";
position: absolute;
width: 0;
right: 0;
height: 1px;
background-color: black;
transition: width .5s ease-in-out;
bottom:-2px;
}

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

span:hover::after{
width: 100%;
}
Pat66
Pat66•2y ago
thanks it' ok
glutonium
glutonium•2y ago
welcome
Unknown User
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
Want results from more Discord servers?
Add your server