Making css numbers to look pretty

Question

I have the code which is in this fiddle

 .numberCircle { border-radius: 10%; behavior: url(PIE.htc); /* remove if you don't care about IE8 */ width: 36px; height: 36px; display: table; padding: 10px; margin-top: 15px; background: #fff; border: 2px solid #666; color: #666; text-align: center; font: 28px Arial, sans-serif; } 

 <div class="numberCircle">368585760</div> 

Thanks to the one who had this fiddle, I updated it with my changes:, now without adding additional html elements , is it possible to design every single number inside the box to look like this

http://prntscr.com/gi26iz

I was trying to use the css3 first child, 2nd child etc etc but I am not sure what to do.

Answer 1

If you can't change the markup, you can try this with jquery - replacing the contents of the div with each digit wrapped into a span .

See a demo to get you started:

 var html = $('.numberCircle') .text() .split('').map(function(e){ return "<span>" + e + "</span>"; }).join(''); $('.numberCircle').html(html); 

 .numberCircle span { border-radius: 10%; behavior: url(PIE.htc); /* remove if you don't care about IE8 */ width: 36px; height: 36px; /*display: table;*/ display: inline-block; /* CHANGED */ padding: 10px; margin: 15px; background: #fff; border: 2px solid #666; color: #666; text-align: center; font: 28px Arial, sans-serif; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="numberCircle">368585760</div> 

Answer 2

I think the only way to do is use javascript to add styling to each elements. There is no css like :nth-letter