Create a CSS-only Word Clock

That’s right! We are going to build a real-time, animated Word Clock that keeps the time. All with just HTML and CSS and no JavaScript at all.

Adding the Words

First, we need to add all the words including the fillers to make the rectangle. I organised everything into rows, and used a mono-space font to make sure with the same number of characters in each row, the rows will end up being the same width.

<div class="clock">
  <div class="row">
    <span class="filler">ac</span><span id="quarter">quarter</span
    ><span class="filler">dco</span>
  </div>
  <div class="row">
    <span id="twentym">twenty</span><span id="fivem">five</span
    ><span class="filler">xw</span>
  </div>
  <div class="row">
    <span id="half">half</span><span class="filler">tyf</span
    ><span id="tenm">ten</span><span class="filler">os</span>
  </div>
  <div class="row">
    <span id="minutes">minutes</span><span class="filler">e</span
    ><span id="to">to</span><span class="filler">ur</span>
  </div>
  <div class="row">
    <span id="past">past</span><span class="filler">oru</span
    ><span id="four">four</span><span class="filler">t</span>
  </div>
  <div class="row">
    <span id="seven">seven</span><span class="filler">x</span
    ><span id="twelve">twelve</span>
  </div>
  <div class="row">
    <span id="nine">nine</span><span id="five">five</span…