html - 在单词中设置特定字母的样式

Question

我当前的 HTML：

<a href="#" id="word">T<span style="font-size: 28px;">est</span><span style="color: pink;">W<span style="font-size: 28px;">ord</span></span></a>

这对 SEO 来说是可怕的。理想情况下，我希望对锚标记完成所有样式：

<a href="#" id="word">TestWord</a>

我知道有一个:first-letter选择器，但是如何修改nth字母并获得预期的输出？

jsfiddle：http: //jsfiddle.net/HUGKv/1/

score 4 · Accepted Answer

目前没有办法n-th letter通过 CSS 定位。有人呼吁 CSSn-th在未来允许一切，但截至今天，没有这样的运气。

目前，您可能必须使用一些 JS 方法来解决这个问题。

score 1 · Accepted Answer

棘手，是的，但更快乐的 SEO，还有：

<h1>TestWord</h1>

h1 {
    color: pink;
}
h1:before {
    content: "Test";
    position: absolute;
    left: 8px;
    color: red;   
}

score 0 · Accepted Answer

使用单个字母所需的 CSS 添加 span 元素。

<a href="#" id="word">Test<span class="classname">W</span>ord</a>

3 回答 3