Pseudo-elements in the Web Animations API

To use the Web Animations API (e.g. el.animate()) you need a reference to a DOM element to target. So, how do you use it on pseudo-elements, which don’t really offer a direct reference? Dan Wilson covers a (newish?) part of the API itself:

const logo = document.getElementById('logo');logo.animate({ opacity: [0, 1] }, {  duration: 100,  pseudoElement: '::after'});

I noticed in Dan’s article that ::marker is supported. I was just playing with that recently while doing our List Style … Read article “Pseudo-elements in the Web Animations API”

The post Pseudo-elements in the Web Animations API appeared first on CSS-Tricks.