How to make a ruler scale in HTML and CSS

Question

I would like to draw something simple like this using HTML and CSS:

|_____|_____|_____|_____|

with aligned numbers underneath each vertical bar, e.g. 0, 1, 2, 3, 4 etc.

I would also like to adjust the space between bars programmatically. Is there any example I can follow?

Answer 1

Here are some CSS on-screen rulers in a fiddle :-p There are probably better/fancier ways to set the spacing, but I included a simple example that loops through and adjusts the salient values.