带有 :before 和 :after 伪元素的 CSS 过渡
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9798010/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Transitions with :before and :after pseudo elements
提问by cjroebuck
Can't seem to animate pseudo elements with -webkit-transition. The fiddle below shows what I mean when run in Chrome/Safari, I guess this isn't supported right now?
似乎无法使用 -webkit-transition 为伪元素设置动画。下面的小提琴显示了我在 Chrome/Safari 中运行时的意思，我想现在不支持吗？
采纳答案by Dan
Fixed in Google Chrome on January 3rd, 2013.
已于 2013 年 1 月 3 日在 Google Chrome 中修复。
By now (I do update this list) it's supported in:
到目前为止（我确实更新了这个列表）它支持：
- FireFox 4.0 and above
- Chrome 26 and above
- IE 10 and above
- 火狐 4.0 及以上
- Chrome 26 及以上
- IE 10 及以上
Waiting for Safari and Chrome for Android to pull these updates.
等待 Safari 和 Chrome for Android 提取这些更新。
You can test it yourself in your browser, or
您可以在浏览器中自行测试，或者
See the browser support table.
请参阅浏览器支持表。
回答by Nobita
Well, actually, you can.
嗯，实际上，你可以。
You just need to leverage the often forgotten inheritvalue.
Unfortunately we can't (yet) directly target pseudo-elements with custom animations, but we surely can let them share the same animation of the "parent" element by inheriting the properties we wish to animate.
您只需要利用经常被遗忘的inherit价值。不幸的是，我们还不能（还）使用自定义动画直接定位伪元素，但我们肯定可以通过继承我们希望动画的属性让它们共享“父”元素的相同动画。
See my fiddle here.
在这里看到我的小提琴。
