Insert a space after every Character in CSS

Question

Let's assume we have this html:

<h2>TITLE</h2>

Is it possible, through the power of CSS alone, to make this either be or behave like:

<h2>T I T L E</h2>

Reason being that I want to justify the letters over a given width in the title, and I don't want to resort to serverside regular expression witchcraft before having properly evaluated the CSS options.

I already managed to justify the single letters through CSS using these rules:

h2 {
  text-align: justify;
  width: 200px; // for example
}

h2:after {
  content: "";
  display: inline-block;
  width: 100%;
}

I've looked into text-replace, but there's no support in any major browser. Other than that, I've not yet found any hopeful candidate.

CSS3 would be ok if there's ok support, JS is not of any help.

UPDATE

letter-spacing is not an option since it has to adjust to the width dynamically AND I do not want to check browser implementation of kerning perpetually. But thanks to the guys suggesting it, I knew I had forgot something when formulating the question :)

Here's a jsfiddle for fiddling

Answer 1

Why not just use letter-spacing?

https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing

Answer 2

A much easier way to do this would be to use the letter spacing css styling.

for example

h2 {
      letter-spacing:10px;
   }