Есть ли псевдоселектор в CSS для выбора буквы: hover?

Question

Я хотел бы воспроизвести это, только с помощью 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; 
    } 

Есть ли обходной путь, который не envolve Javascript? и (я забыл упомянуть), не поставив пролеты в HTML

Спасибо заранее

Answer 1

CSS, как правило, применяется для селекторов, а не отдельные буквы в текстовом узле. С помощью современного CSS вы можете использовать псевдоэлемент :first-letter, но, насколько я знаю, речь идет о том, насколько вы можете укладывать отдельные персонажи. Единственный способ - обернуть каждый символ в отдельный элемент (возможно, span) и работать с этим.

Итак, чтобы сократить длинный ответ короткий: на данный момент нет, нет никакого способа сделать это с помощью только CSS.

Answer 2

Вы можете в конечном итоге обернуть каждый символ в пролете вручную и избегать использования JavaScript, что путь:

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