0

I'm using the following code to add thicker/styling 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 properly if I transform it into a class and add it as a <span> to every single link. If I try to implement globally, it doesn't work when there are line breaks in the middle of the hyperlinks. It works when there's no line break, but not with line breaks.

Is there any way to fix it in a way to use it globally rather than having to define <span>s to every single hyperlink?

SecretAgentMan
  • 2,856
  • 7
  • 21
  • 41
42piratas
  • 555
  • 1
  • 9
  • 26

1 Answers1

0

I had the same problem recently. I can suggest you to use border bottom instead of ::after. Try this out:

a {
    border-bottom: 1rem solid;
}

also you can specify size in px instead of rem. And don't forget to specify border color if it doesn't appear

border-color: black;
Marat
  • 82
  • 5