How to ensure that thick underline works on line breaks?

Question

I'm using the following code to add a thicker/more stylized underline decoration to my hyperlinks.

a { text-decoration: none; position: relative;}

a:hover { color: #c0632e; }

a::after { content: ""; position: absolute; width: 100%; height: 30%;
        bottom: 0; left: 0; background-color: #2EB0C0;
        opacity: 0.15; z-index: -1; }
    
a:hover::after { background-color: #c0632e; }

However, it only works if I convert it to a class and add it to each link as . If I try to implement it globally, it doesn't work when there is a newline in the middle of the hyperlink. It works fine when there are no line breaks, but not when there are line breaks.

Is there a way to fix this so that it can be used globally without having to define for each hyperlink?

Answer 1

I also encountered the same problem recently. I suggest you use border bottom instead of ::after. Try this:

a {
    border-bottom: 1rem solid;
}

You can also use px to specify the size instead of rem. Don't forget to specify the border color if it doesn't show up

border-color: black;