Counter styling with CSS

Key ingredients

  1. Background image, like the above
  2. Fixed-width font, like Courier
  3. CSS letter-spacing property
  4. Ability to zero-pad numbers with your server-side language

<div id="counter">0003</div>


#counter {  /* adjust all styles below to fit your chosen font / size */
  width: 68px;
  padding: 1px 0 3px 3px;
  font-family: Courier;
  font-size: 18px;
  letter-spacing: 7px;
  background: url('/src/img/test.png') 0 0 repeat-x; }

With ColdFusion as an example, you might use the following code to zero-pad your counter:

<div id="counter"><cfoutput>
  #NumberFormat(hits, "0009")#

Why follow me on Twitter?

  • I tweet about new technologies, services or libraries I find interesting
  • Yeah, sometimes I'll post a pet-peeve or rant about something trivial
  • If I discover something that made my web development life easier, I share it
  • I'll shout out any handy tip that I think might be useful to other devs

Tagged .

Updated: 2011-05-09

Phil LaNasa follow us in feedly