CSS Pseudo-elements JavaScript Prototype

Contents

• About
• Requirements
• Demos
• Source
• License Information

About

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.

Requirements

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

Demos

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.

• Creating multiple CSS Pseudo-elements

  This demo shows the basic behavior when generating multiple '::before' and '::after' pseudo-elements.

• CSS pseudo-elements and native ::before/::after

  CSS Pseudo-elements extend native pseudo-elements like ::before and ::after so they work together.

• Selecting with ::nth-pseudo

  This demo highlights the nth-pseudo selector to match and style pseudo-elements by index.

• Selecting with ::nth-last-pseudo

  This demo highlights the nth-last-pseudo selector to match and style pseudo-elements by index.

• Working with CSS Pseudo-elements and JavaScript

  This demo shows how to query the DOM for pseudo-elements.

• Speech bubble with CSS Pseudo-elements

  This demo shows how you can generate components of a 'speech bubble' with multiple pseudo-elements.

• 3D box with CSS Pseudo-elements

  Transform CSS pseudo-elements to create a 3D box

• CSS Pseudo-elements as regions

  This demo shows how pseudo-elements can act as a region-chain when working with CSS Regions.

Source

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!