Animatable multiline underline that skips descenders

codeswing.json

{
  "scripts": [],
  "styles": [],
  "themePreview": false
}

index.html

<a class="link" href="#">
	<span class="underline">I'm a super cool link because my cool underline animation works even in multiple lines!</span><!--
	--><span class="no-break">&nbsp;</span><!--
	--><svg viewBox="0 0 1703.745 1638.118">
		<path d="M1178.333,436.669c585.21,0,675.797,276.558,201.763,620.964c180.84,556.568-54.19,728.182-528.223,383.777 c-473.445,343.978-709.288,173.483-528.223-383.777C-149.796,713.656-60.525,436.669,525.412,436.669 C706.252-119.898,997.268-120.59,1178.333,436.669z"/>
	</svg>
</a>

style.css

/** basic styles */

.link {
	resize: both;
	display: block;
	overflow: hidden;
	width: 410px;
	font-family: Roboto, roboto, sans-serif;
	font-size: 30px;
	text-decoration: none;
	color: black;
}

svg {
	margin-left: 8px;
	vertical-align: top;
	height: 1em;
	width: 1em;
	display: inline;
	fill: currentColor
}

/** animatable multiline underline */

.underline {
	--line-thickness: .075em;
	--line-bottom-offset: .025em;

	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-size: 100% var(--line-thickness);
	background-position: 0 calc(100% - var(--line-bottom-offset));
	transition: background-size 300ms;
}

.link:hover .underline {
	background-size: 0 var(--line-thickness);
}

/** underline skips on descenders */

.link {
	--background-color: white;
	text-shadow:
		0.03em 0 var(--background-color),
		-.03em 0 var(--background-color),
		0 0.03em var(--background-color),
		0 -.03em var(--background-color),
		0.03em 0.03em var(--background-color),
		-.03em 0.03em var(--background-color),
		0.03em -.03em var(--background-color),
		-.03em -.03em var(--background-color),
		0.06em 0 var(--background-color),
		-.06em 0 var(--background-color),
		0 0.06em var(--background-color),
		0 -.06em var(--background-color),
		0.06em 0.06em var(--background-color),
		-.06em 0.06em var(--background-color),
		0.06em -.06em var(--background-color),
		-.06em -.06em var(--background-color);
}

/** no line break before svg */

.link {
	white-space: nowrap;
}

.no-break {
	font-size: 0;
}

.underline {
	white-space: normal;
}