CSS中是否有任何伪选择器来选择一个字母：悬停？答案

【问题标题】：Is there any pseudo selector in CSS to select a letter:hover?CSS中是否有任何伪选择器来选择一个字母：悬停？
【发布时间】：2023-03-21 12:02:01
【问题描述】：

我想用 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;
    }

是否有任何不涉及 Javascript 的解决方法？并且（我忘了提）没有将跨度放在 html 中

提前致谢

【问题讨论】：

标签： css letter

【解决方案1】：

您最终可以手动将每个字符包装在一个跨度中，并避免以这种方式使用 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

【讨论】：

【解决方案2】：

CSS 通常应用于选择器，而不是文本节点中的单个字母。使用现代 CSS，您可以使用 :first-letter 伪元素，但据我所知，这是您可以对单个字符进行样式设置的程度。唯一的方法是将每个字符包装在一个单独的元素中（可能是span）并使用它。

所以，长话短说：到目前为止，不，仅使用 CSS 是无法做到这一点的。

【讨论】：