CSS Pseudo-elements JavaScript Prototype



CSS Pseudo-elements is a new proposal by Adobe to the W3C that allows multiple "before" and "after" pseudo-elements to be generated by a single element.

Multiple pseudo-elements cover use cases collected on css-tricks.com.

This is a prototype JavaScript implementation to give you a feel for how the code will look like and behave. Please keep in mind that this is just experimental stuff and treat it accordingly.


The code and demos are expected to work in a WebKit nightly build.


These samples demonstrate the code and functionality to be expected when using CSS Pseudo-elements. Be sure to inspect the source code to understand what's going on.


The source code is available on GitHub: https://github.com/adobe/css-pseudo-elements

Feel free to have a look and experiment. Make a pull request if you want to contribute.

W3C Proposal

Comments on the CSS Pseudo-elements proposal are welcome.

Send your feedback to the W3C's www-style@w3.org mailing list with the subject line "[css4-pseudoelements] message topic".

License information

The code in this repository implies and respects different licenses. This is a quick overview. For details check each folder's corresponding LICENSE.md file.

The code for the prototype, located under the src/ folder, is available under the MIT license.

The samples code and content, test files and documentation, unless otherwise specified, are available under the Public Domain License.

Third party assets are licensed accordingly in their respective folders.

Have fun!