Execution underlines

by Isaiah Odhner

HTML

<div><u class="timer">Every <span class="numeric">2 seconds</span>,</u>
	<div><u class="timed-action">Do something</u></div>
	<div><u class="timer second">Then after <span class="numeric">half a second</span>,</u>
	<div><u class="timed-action second">Perform some second action</u></div>
</div>
</div>

CSS

body {
	font-size: 2em;
	line-height: 1.5em;
	font-family: sans-serif;
	background: white;
	color: #111;
}
body.dark {
	background: #111;
	color: white;
}

div > div {
	margin-left: 2em;
}

u {
	text-decoration: none;
	display: inline-block;
	position: relative;
}

u::after {
	content: '';
	display: block;
	height: 0.1em;
	position: absolute;
	bottom: 0.1em;
	background: orange;
	width: 100%;
}

.timer::after {
	animation: timer-underline 2s linear infinite;
}
.timed-action::after {
	opacity: 0;
	animation: timed-action-underline 2s linear infinite;
	animation-delay: 2s;
}
@keyframes timer-underline {
	0% { width: 0; }
	100% { width: 100%; }
}
@keyframes timed-action-underline {
	0% { opacity: 1; }
	10% { opacity: 0; }
	100% { opacity: 0; }
}
.second.timer::after {
	animation: second-timer-underline 2s linear infinite;
	animation-delay: 2s;
}
.second.timed-action::after {
	opacity: 0;
	animation: second-timed-action-underline 2s linear infinite;
	animation-delay: 2.5s;
}
@keyframes second-timer-underline {
	0% { width: 0; }
	25% { width: 100%; }
	26% { width: 0; }
	100% { width: 0; }
}
@keyframes second-timed-action-underline {
	0% { opacity: 1; }
	10% { opacity: 0; }
	100% { opacity: 0; }
}

.numeric {
	color: #518AFF;
}
.timer {
	/* color: #CE6F25; */
	color: orange;
}
.dark .timer {
	color: #FFD890;
}

#toggle-dark-mode {
	position: absolute;
	right: 0.5em;
	top: 0.5em;
	font-size: 0.8em;
}

JavaScript

var toggleDarkMode = function() {
	if (document.body.classList.contains("dark")) {
		document.body.classList.remove("dark");
	} else {
		document.body.classList.add("dark");
	}
};
var button = document.createElement("button");
document.body.appendChild(button);
button.id = "toggle-dark-mode";
button.onclick = toggleDarkMode;
button.textContent = "◐";
button.setAttribute("title", "Toggle dark theme");
button.setAttribute("aria-label", "Toggle dark theme");