Pseudo element solution for WebKit

Through a bug-fix by Elliott Sprehn, it's now possible to animate and transition pseudo elements (such as ::before and ::after) in WebKit. Software engineer Peter Beverloo tweeted about the announcement, which met with a flurry of retweets and favourites, highlighting how the industry cared about what ostensibly appeared to be a relatively minor fix.

Speaking to .net, Beverloo pointed at Chris Coyier's article on use cases for pseudo elements as a reason for why the bug-fix was so important and welcomed. In response to his tweet, one developer remarked that "we can finally remove some span elements from our markup", but Beverloo warned WebKit support was just the start, and such fixes will take time to filter through. "WebKit is the second engine to implement support," he said. "Firefox has had it since version 4. For Chrome, support is likely to land in Chrome 26. Since it's not behind a compile-time flag, it may be part of an upcoming release of Safari, but that's of course up to Apple and not something others can comment about." He added that neither Microsoft Internet Explorer nor Opera yet support pseudo element animations and transitions, thereby making it "not something developers can rely on yet". He recommended using <span> elements as a workaround.

Despite the lack of ubiquity of pseudo element animations and transitions, the W3C's Lea Verou enthused about the fix. She reasoned that "developers often use the ::before and ::after pseudo elements to add many different kinds of decorations to elements without resorting to empty HTML elements, or even to imitate backgrounds with more fine-grained control than what the background properties offer". Now, these can at least be animated in WebKit. "Anything that will help us keep mark-up clean and semantic is a blessing," she concluded, "and so no wonder we're excited."