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.

Answer 2

You can eventually wrap every single character in a span manually and avoid using javascript that way:

HTML

<h2>
<span>M</span><span>a</span><span>n</span><span>d</span><span>a</span><span>r</span><span>i</span><span>n</span><span>a</span> 
<span>L</span><span>i</span><span>m</span><span>ó</span><span>n</span>
</h2>

CSS

h2 > span:hover{

    position:relative;
    bottom:3px;
}

JSFiddle example