Make underline effect

I want realise a underline hover effect on my link but the problem is the undreline take only one link https://codepen.io/alpha_66/pen/JjejLwG?editors=1010 can I get some ideas please ?

CodePen

...

2 Replies

Mannix•2y ago

try adding

left: 0;
top: 100%;

left: 0;
top: 100%;

to the after

Pat66OP•2y ago

a::after{
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    background: #000;
    left: 0;
    display: block;
}

a::after{
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    background: #000;
    left: 0;
    display: block;
}

problem solved