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 を介してターゲットを設定する方法はありません。将来的には CSS ですべてを許可するよう求める声もありますがn-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