css biến đổi không hoạt động trên css tạo ra nội dung cho :: sau, :: trước khi các yếu tố

Question

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

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

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

Theo trang web này, nó đã được cố định trong Chrome 23 ... nhưng tôi có Chrome 28 và nó không hoạt động.

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

Answer 1

Tôi có một chút tò mò về vấn đề này bản thân mình, vì vậy tôi nhìn một chút sâu hơn vào nó. Hóa ra, nó hoạt động.

Sau khi xem xét các trường hợp thử nghiệm: pseudo-transition.html

tôi nhận thấy các yếu tố giả đã có một phong cách: display: block.

Thay đổi fiddle của bạn để sử dụng display: inline-block và thì đấy!

Fiddle

Và với sự chuyển onLoad:

Transition Fiddle

New Style:

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

Answer 2

Theo w3 spec:

Phần tử có thể biến đổi là một phần tử trong không gian tên HTML, hoặc là một phần tử cấp khối hoặc nguyên tố cấp nội tuyến hoặc nguyên tử cấp hoặc thuộc tính 'hiển thị' tính thành 'hàng bảng', 'nhóm-hàng-nhóm', ' table-header-group ',' table-footer-group ',' table-cell 'hoặc' table-caption '; hoặc một phần tử trong không gian tên SVG (xem [SVG11]) có các thuộc tính ‘transform’, ‘patternTransform’ hoặc ‘gradientTransform’.

Do đó bạn cần phải xác định display: block hoặc display: inline-block (hoặc, nói, display: table-row) để tố hoặc giả yếu tố để các biến đổi được áp dụng.