Using the CSS object model exposed by CSS Regions you can create regions dynamically at runtime.
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. In this example you can see how another region (the blue one) is added after the page is loaded and the CSSRegions object is created. This is a very long link!
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.