一个单词中的样式特定字母

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/

Answer 1

目前无法通过CSS定位n-th letter。有一些要求CSS允许n-th将来的一切，但截至今天，没有这样的运气。

目前，你可能不得不使用一些JS方法来解决这个问题。

Answer 2

整蛊，是的，但更幸福的SEO，还有：

<h1>TestWord</h1>

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

fiddle

Answer 3

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

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