whatsub whatsup

by Laurens Maneschijn

HTML

<sup>Hey, whatsub</sup>
<sub>Hey, whatsup</sub>

<hr>

<sup>What's down below?</sup>
<sub>What's up above?</sub>

CSS

body {
	text-align: center;
	padding-top: 100px;
}

sub, sup {
	white-space: nowrap;
}

sub, sup,
sub::before ,
sub::after ,
sup::before ,
sup::after {
	margin: 2px;
}

/*
🙂 \01f642
🙃 \01f643
*/
sub::before {
	content: '\01f643  <';
}
sub::after {
	content: '>';
}
sup::before {
	content: '<';
}
sup::after {
	content: '>  \01f642';
}

/* https://css-tricks.com/linearly-scale-font-size-with-css-clamp-based-on-the-viewport/ */
* {
	font-size: 130%;
	font-size: clamp(1rem, -0.875rem + 5.8vw, 9.5rem);
}

hr {
	margin: 40px;
}