CSS transform не работает с CSS-контентом для:after,: before элементов

http://jsfiddle.net/chovy/enmxu/

<a href="#">Inbox</a>

a { text-decoration: none; }
a::after { content: ' ⇧'; transform: rotate(180deg); }

согласно этому сайту, он был исправлен в Chrome 23...но у меня есть Chrome 28, и он не работает.

http://css-tricks.com/transitions-and-animations-on-css-generated-content/ http://trac.webkit.org/changeset/138632

10
css-transforms css3

2 ответов

мне самому стало немного любопытно, поэтому я немного углубился в это. Оказывается, это работает.

посмотрев на тест: псевдо-перехода.HTML-код

Я заметил, что псевдо-элемент имел стиль:display: block.

изменение скрипки для использования display: inline-block и вуаля!

Скрипка

и с переходом onLoad:

Переход Скрипка

новый Стиль:

a:after { display: inline-block; content: ' ⇧'; -webkit-transform: rotate(180deg); }
25

По словам В3 спецификаций:

преобразуемый элемент является элементом в пространстве имен HTML, который является либо блок-уровня или атомной инлайн-уровня элемент, или "дисплей" собственность вычисляет элементы ‘table-row’ и ‘таблица-строки-группа", "таблица-заголовок-группа", "таблица-колонтитул-группа", "ячейки таблицы" или " таблицы-заголовок’; или элемента в SVG пространства имен (см. [SVG11]), которая имеет атрибуты ‘преобразования’, ‘patternTransform’ или ‘gradientTransform’.

следовательно, вам нужно указать display: block или display: inline-block (или, скажем, display: table-row) к вашему элементу или псевдо-элементу, чтобы применить преобразование.

8