Is there any pseudo selector in CSS to select a letter:hover?

Question

I would like to reproduce this, just with CSS:

http://jsfiddle.net/g32Xm/

$(function(){
    var text = $('h2').text();
    var atext = text.split("");
    var newText = '';
    for(var i=0; i< atext.length; i++){
        newText += '<span>'+ atext[i]+'</span>';
    }
    $('h2').html(newText);

});

CSS

 h2 span:hover{

        position:relative;
        bottom:3px;
    }

Is there any workaround that doesn't envolve Javascript? and (i forgot to mention) without putting the spans in the html

Thanks in advance

Answer 1

CSS is generally applied to selectors, not individual letters in a text node. With modern CSS, you can use the :first-letter pseudoelement, but as far as I know, this is about as far as you can go with styling individual characters. The only way is wrapping each character in a separate element (a span, probably) and working with that.

So, to cut the long answer short: as of now, no, there's no way to do that with just CSS.