Absolute position a line under multiple lines of text - html

Question

I have a very simple setup, whereby I add a 2px high 'line' under all my A href's, in an :after psuedo element.
The problem is that I want that line to be under each line of text within the a html tag, not just the bottom of the a.
Is there a way to make the :after appear under each line of text, rather than the text block as a whole?
I am not using text-decoration: underline; is because I want to control the look/styling of the underline and also then animate it on hover.
HTML:
Some text here that will wrap onto 2 lines because it is quite long
CSS:
a:after {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: currentColor;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
I want the :after line to appear under BOTH lines of text, when it wraps (so appears like a common a link underline), but current it only shows under the A block as a whole...
I want:
Some text that will wrap onto 2 lines
_____________________________________
because it is quite long.
_________________________
What I get:
Some text that will wrap onto 2 lines
because it is quite long.
_____________

Answer 1

ok, probably not the most elegant solution, but you can try with a gradient Background:
.gradientLink{
line-height: 50px;
text-decoration: none;
color: #212121;
padding: 14px 0;
background: linear-gradient(0deg, red 1px, white 1px);
}
https://codepen.io/giannidk/pen/MZGPNX

Answer 2

Try this css code please.
a::after{
max-width: 50%;
border-bottom: 1px solid black;
content: '';
display: block;
}
It will set border after every a tag ,u can manually adjust the border width by changing max-width size.

Answer 3

Why don't you use border instead ?
a{
padding-bottom: 10px;
border-bottom: 1px solid grey;
text-decoration: none;
}

Answer 4

I am afraid you cannot do that with pure CSS. The only solution coming to my mind at this point is to add elements/lines to the dom using javascript:
I would advice subscribing to the 'resize' event on the window and to change the amount of your needed underlines according to the number of lines your a tag takes up.