In CSS, there are pseudo elements like “before” and “after”. That creates virtual elements before or after an element.
Container pseudo element?
Is there a “container” pseudo element?
Problem example 1:
I need to create 15 borders around an element (I know this particular example can be done by using box-shadow).
Problem example 2:
I need to create 15 transparent background colors on top of eachother.
A lot of unnecessary markup
I know that is possible by adding containing divs, but that creates a lot of unnecessary markup.
The old CSS3 Generated and Replaced Content Module had a proposal for an
::outsidepseudo-element which seems close to what you describe, but there are no implementations, and the module itself is slated for a rewrite… someday.In other words, there’s currently no way to achieve this using only CSS, and there probably won’t be any for a while.
Of course, there are ways to emulate wrapping elements using JavaScript to manipulate the DOM, but that’s just about the only way you can achieve this besides hardcoding in the extra markup. Some trivial jQuery methods with respect to the fabled
::outsidepseudo-element are described here:Enable support for CSS3 ::outside pseudoelement