Individual Character Styling

Apologies if this is in the wrong forum, just not sure where it should be !

I have a Counter on my site which displays the number of items in a database and then changes depending on various Selects and filters, it works well but doesn’t look very nice !

I would like to style the numbers to look a little bit like a Hit Counter … I believe this would require individual character styling to set a css background, border etc around each individual character something like this would be great !!

<span id="counter" class="counter-box"> <em class="number">3</em> <em class="number">6</em> <em class="number">7</em> <em class="comma">,</em> <em class="number">2</em> <em class="number">7</em> <em class="number">6</em> </span>


em { font-weight: bold; font-style: normal; font-size: 1.2em; display: inline; border: 1px solid black; color: #fff; margin-left: -1px; border-radius: 2px; background-color: #444; background-image: -moz-linear-gradient(top, #888 0%, #000 100%); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#888), color-stop(100%,#000)); padding: 0 4px 0 5px; }

That is the effect that i want to achieve, but unfortunately as my number is dynamically generated with the following

<fieldset> <div class="stock"><span id='dynamicStockCount'></span>&nbsp; Vehicles in stock</div> <span id='originalCount' style='display:none'><?php echo $resultCount;?></span> </fieldset>

to show

<span id="originalCount" style="display:none">98</span>

So does anybody have any great ideas to achieve what i want ?
Thanks for any suggestions !

Sponsor our Newsletter | Privacy Policy | Terms of Service