<time id="time" datetime="2021-07-18T16:45"></time>
<div class="clock"></div>
.clock::after {
  counter-increment: hours var(--setTimeHours) minutes var(--setTimeMinutes);
  content: counter(hours) ":" counter(minutes);
}

@for $i from 0 through 9 {
  [datetime*="T0#{$i}"] + .clock::after  { --setTimeHours: #{$i} }
}
@for $i from 10 through 24 {
  [datetime*="T#{$i}"] + .clock::after  { --setTimeHours: #{$i} }
}

@for $i from 0 through 9 {
  [datetime*=":0#{$i}"] + .clock::after { --setTimeMinutes: #{$i} }
}
@for $i from 10 through 60 {
  [datetime*=":#{$i}"] + .clock::after { --setTimeMinutes: #{$i} }
}
View Compiled
// function setTime () {
//   const currentTime = new Date();
//   const isoString = currentTime.toISOString().slice(0, 16);
//   const timeEl = document.getElementById("time");
//   timeEl.setAttribute("datetime", isoString);
// }

// window.onload = setTime;
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.