a:hover::first-letter

[T@NKIST]

Хочу чтоб при наведении на ссылку менялась первая буква в слове, но данный код это не делает.

a:hover::first-letter {
    color: #00bff3;
}

Как сделать правильно?

[uuu]

Хороший вопрос, не знал о такой проблеме.

Единственное, что придумал: обернуть ссылку дивом и применить стиль к нему

http://jsfiddle.net/3v79h/

Еще, конечно, можно написать скрипт.

В спецификации сказано, что

псевдоэлемент :first-letter применяется к элементам блок, элемент списка, ячейка таблицы, заголовок таблицы и inline-block.

Но почему применение к тегу <а> display: block не помогает?

Буду рад если кто-нибудь предложит вариант лучше или объяснит почему так происходит.

Edited January 8, 2013 by uuu

[T@NKIST]

Хороший вопрос, не знал о такой проблеме.

Единственное, что придумал: обернуть ссылку дивом и применить стиль к нему

http://jsfiddle.net/3v79h/

Еще, конечно, можно написать скрипт.

В спецификации сказано, что

псевдоэлемент :first-letter применяется к элементам блок, элемент списка, ячейка таблицы, заголовок таблицы и inline-block.

Но почему применение к тегу <а> display: block не помогает?

Буду рад если кто-нибудь предложит вариант лучше или объяснит почему так происходит.

К сожалению обертка не помогает, display: block стоял до этого и безрезультатно

[witec]

Может так ?

http://jsfiddle.net/witec/wGKfL/

или обязательно через :first-letter ?

Edited January 9, 2013 by witec

[mrnobody]

У меня вот так получилось — http://jsfiddle.net/3v79h/12/

[npofopr]

А можно каждую буковку обернуть в span и через :nth-child любой менять что захотите

http://codepen.io/tholman/pen/lcIGJ

[uuu]

У меня вот так получилось — http://jsfiddle.net/3v79h/12/

ухты! пробовал также, но почему-то не получилось, видимо руки кривые