Style specific letters in a word [duplicate]

Question

This question already has an answer here:

• Is it possible to apply different styles to different letters in word? 3 answers

My current 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>

This is terrible for SEO. Ideally, I'd like all styling done to the anchor tag:

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

I understand there is a :first-letter selector, but how can I modify an nth letter and get my expeced output?

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

Answer 1

Tricky, yes, but happier SEO, also:

<h1>TestWord</h1>

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

fiddle

Answer 2

Currently there is no way to target n-th letter through CSS. There are some calls for CSS to allow n-th everything in the future, but as of today, no such luck.

Currently, you would probably have to use some JS approach to solve this.

Answer 3

Add a span element with the CSS you require for individual letters.

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