How to make letter spacing between two letters using CSS only?

Question

Here is my html code:

<span class="number">0102030405</span> 

I want to get this:

01 02 03 04 05

Here is what I tried:

 .number { letter-spacing: 2px; text-weight: bold; } 

but the interval between each number. How can I apply intervals every two numbers?

Note:
I am only looking for a CSS solution .

Answer 1

For a CSS-only solution, without an nth-letter selector you will be dealing with workarounds. There is currently no nth-letter , as you undoubtedly know, so a workaround is possible here, albeit an ugly one.

If you are happy to configure .number for each instance, then you can use the following approach based on splitting pairs of numbers using columns. Works well for this example:

 .number { width: 8em; display: block; word-wrap: break-word; columns: 5; -webkit-columns: 5; -moz-columns: 5; column-gap: 0.2em; -webkit-column-gap: 0.2em; -moz-column-gap: 0.2em; } 

See: http://jsfiddle.net/WgRs6/

The values ​​of width , columns and column-gap should be changed depending on the number of markup, as well as the selected font size. You also need to adjust them to change the space between the columns. Unfortunately, this will certainly break if numbers with a different number of digits (e.g. 1, 200, 3, 9000, 42, 100000). You requested that the separation between the two numbers be so reliable that this should not be a problem for you.

Ideally, you can use lettering.js or any JavaScript that would separate your letters into separate span elements, which you could then combine with .number span:nth-child(2n) to add the desired spacing. See: http://jsfiddle.net/SSq7M/

Answer 2

I'm not sure if you can do this with css. You can do this with javascript anyway. The code will look like this:

  String.prototype.chunk = function(n) { var space = []; for(var i=0, len=this.length; i < len; i += n) { space.push(this.substr(i, n)) } return space }; "0102030405".chunk(2).join(' '); 

Tick Fiddle

Answer 3

This cannot be done in CSS because there is no selector that will refer to, say, the third character in the content of the element or the first two characters. CSS works with elements and pseudo-elements, and not a single pseudo-element is suitable for this.

If possible, the content should be changed on the server side or, if this is not possible, with client-side JavaScript, so that pairs of characters are displayed as elements or between them there are whitespace characters, for example. <span class="number">01 02 03 04 05</span> . In the latter case, you can use word-spacing (possibly with a negative value) to adjust the number of intervals.