Kevin Powell - Community•2y ago

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•2y ago

Message Not Public

Pat66OP•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•2y ago

Message Not Public

Pat66OP•2y ago

max-content don't change anything 😩

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%;
}

Pat66OP•2y ago

thanks it' ok

glutonium•2y ago

welcome

Unknown User•2y ago

Message Not Public

Gaming

Programming

underline a link