Here's a little Inside Baseball on @nes-pictionary for y'all.
The hints use letter-spacing to add a visual gap between the dashes (okay yes technically they're underscores, I'm calling them dashes here, shush). The hint numbers are added using the <ruby> element.
Here's how that looks under the hood:
<ruby style="ruby-position:under;">
<span style="letter-spacing:0.2em;">_____</span><rt>5</rt>
</ruby>
I've hidden some of the CSS properties like font-size from the code, so I can highlight the important bits. Did you know, Safari doesn't support ruby-position:under and needs you to use -webkit-ruby-position:after instead?
Anyway, here's how that gets rendered:
_____
The <span> is highlighted in red and the <rt> is highlighted in blue.
You'll notice the 5 is awkwardly offset from the dashes. That's because the dashes aren't actually centered within the <ruby> element. The letter-spacing property adds a little extra space after each character, but there isn't a matching leading space at the start, so it's imbalanced within the container. We can fix this by adding some padding-left to the dashes to balance it out.
<ruby style="ruby-position:under;">
<span style="letter-spacing:0.2em;padding-left:0.2em;">_____</span><rt>5</rt>
</ruby>
_____
There we go, ain't that a beauty? This is how @nes-pictionary's hints are rendered!
Oh, but then today I had some bright idea to refactor the bot a little, and in the process I made a very subtle change to the template. Can you spot it?
<ruby style="ruby-position:under;">
<span style="letter-spacing:0.2em;padding-left:0.2em;">_____</span>
<rt>5</rt>
</ruby>
That's right, I fell victim to one of the classic blunders — assuming that putting an HTML element on its own line wouldn't break things. Ah, hubris. Putting the <rt> on a separate line from the <span> is apparently enough to introduce some whitespace that breaks the centering again in firefox at least (apparently it still renders fine in webkit-based browsers which is uh, most of them).
_____
I hate computers.