Multiple pseudo-elements cover use cases collected on css-tricks.com.
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.
This demo shows the basic behavior when generating multiple '::before' and '::after' pseudo-elements.
CSS Pseudo-elements extend native pseudo-elements like ::before and ::after so they work together.
This demo highlights the nth-pseudo selector to match and style pseudo-elements by index.
This demo highlights the nth-last-pseudo selector to match and style pseudo-elements by index.
This demo shows how to query the DOM for pseudo-elements.
This demo shows how you can generate components of a 'speech bubble' with multiple pseudo-elements.
Transform CSS pseudo-elements to create a 3D box
This demo shows how pseudo-elements can act as a region-chain when working with CSS Regions.
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.
Comments on the CSS Pseudo-elements proposal are welcome.
Send your feedback to the W3C's firstname.lastname@example.org mailing list with the subject line "[css4-pseudoelements] message topic".
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.