<p>Hello, <a href='https://solarsystem.nasa.gov/planets/earth/overview/' target='_blank'>World</a>!</p>

body {
	display: grid;
	place-content: center;
	margin: 0;
	height: 100vh;
	background: #222;
	color: #ddd;
	font: italic clamp(1.25em, 15vw, 7em)/ 1.25 
		marck script, purisa, segoe script, comic sans ms, cursive;
	text-align: center
}

p { isolation: isolate }

a {
	position: relative;
	padding: 0 .25em;
	color: gold;
	text-decoration: none;
	
	&::after {
		position: absolute;
		top: 0; bottom: 0; right: 0; left: 0;
		transform-origin: 0 100%;
		transform: scaley(.05);
		background: currentColor;
		mix-blend-mode: difference;
		transition: transform .25s;
		content: ''
	}
	
	&:focus { outline: none }
	&:focus, &:hover { &::after { transform: none } }
}

/*
NO JS here

Created for my Taming Blend Modes: `difference` and `exclusion` (https://css-tricks.com/taming-blend-modes-difference-and-exclusion/) article on CSS-Tricks - check it out for context!
*/