<section>
	<p>Hello, <a href='https://exoplanets.nasa.gov/alien-worlds/strange-new-worlds/' target='_blank'>Alien World</a>!</p>
</section>
* { margin: 0 }

body {
	display: grid;
	height: 100vh;
	font: italic clamp(1.25em, 13vw, 7em)/ 1.25 
		marck script, purisa, segoe script, comic sans ms, cursive;
	text-align: center
}

section {
	display: grid;
	place-content: center;
	background: invert(#ddd);
	color: invert(#222);
	filter: invert(1)
}

p { isolation: isolate }

a {
	display: inline-block;
	position: relative;
	padding: 0 .25em;
	color: invert(purple);
	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 } }
}
View Compiled
/*
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!
*/
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.