.apple::before{content:'a';}
.banana::before{content:'b';}
.carrot::before{content:'c';}
.donut::before{content:'d';}
.earwig::before{content:'e';}
.freddie::before{content:'f';}
.grape::before{content:'g';}
.hat::before{content:'h';}
.item::before{content:'i';}
.joke::before{content:'j';}
.kilo::before{content:'k';}
.loop::before{content:'l';}
.manticore::before{content:'m';}
.night::before{content:'n';}
.orange::before{content:'o';}
.pillock::before{content:'p';}
.quiet::before{content:'q';}
.rose::before{content:'r';}
.sweet::before{content:'s';}
.tickle::before{content:'t';}
.union::before{content:'u';}
.verify::before{content:'v';}
.wander::before{content:'w';}
.xilo::before{content:'x';}
.yoyo::before{content:'y';}
.zeta::before{content:'z';}
.dotdot::before{content:':';}
.dot::before{content:'.';}
.nuthin::before{content:' ';}
.comma::before{content:',';}
.dotcomma::before{content:';';}

span
{
  visibility: hidden;
  display: inline-block;
  max-width: .5em;
  max-height: 0em;
  font-family: monospace;
  font-size: 2em;
}

span::before{visibility:visible;}