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."

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

The Creative Bloq team is made up of a group of design fans, and has changed and evolved since Creative Bloq began back in 2012. The current website team consists of six full-time members of staff: Editor Kerrie Hughes, Deputy Editor Rosie Hilder, Deals Editor Beren Neale, Senior News Editor Daniel Piper, Digital Arts and Design Editor Ian Dean, and Staff Writer Amelia Bamsey, as well as a roster of freelancers from around the world. The 3D World and ImagineFX magazine teams also pitch in, ensuring that content from 3D World and ImagineFX is represented on Creative Bloq.