Как сделать так, чтобы transform не наследовался :after'ом?

Question

[jab]

Есть ли такая возможность?

Вот пример: jsfiddle.net/jab1/52z8N/

Answer 1

[MT]

Внутрь ссылки всё равно нужно вложить SPAN и применить поворот именно к нему, чтобы кликальбельно-наводимая область не изменяла своё положение при наведении (иначе пострадает удобство пользователя).

Генерируемый контент следует задать для обрамляющего блока, например, DIV:

<div><a href="#"><span>Must... rotate... now!</span></a></div>

jsfiddle.net/52z8N/4/

Comments

[MT]

(Хотя, собственно, учитывая перенос поворота во вложенный SPAN, можно использовать генерируемый контент самОй ссылки без дополнительного DIV-контейнера.)

Answer 2

[Anton Bobylev]

Вращая в обратную сторону: jsfiddle.net/52z8N/3/, хотя это тот еще костыль

stackoverflow.com/questions/7045140/prevent-children-from-inheriting-transformation-css3?lq=1

Comments

[jab]

Жаль. Так всё элегантно вытанцовывалось…
Придется городить кучу дивов.

Answer 3

[Виктор Виктор]

если только:

a:hover:after {
    -webkit-transform: rotate(+5deg);
    transform: rotate(+5deg);
}

Но выглядит не очень

Answer 4

[jab]

Это первое, что я сделал, но смотрится ужасно.

Answer 5

[jab]

Спасибо. В итоге примерно так и сделал.

Answer 6

[jab]

Жаль только, что не получилось обойти одним <a href="#">…