6

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.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Jens Törnell
  • 23,180
  • 45
  • 124
  • 206
  • 2
    Is there a question in there? – j08691 Jul 20 '12 at 20:00
  • 1
    `::before` and `::after` are pseudo-elements, not pseudo-classes; and what do you mean by 'container' pseudo-class (I assume you mean pseudo-element, as with the other two)? – David Thomas Jul 20 '12 at 20:01
  • How exactly would a `container` pseudo class work? – Alex Wayne Jul 20 '12 at 20:01
  • See this answer http://stackoverflow.com/a/4574946/886539 – Simon Arnold Jul 20 '12 at 20:02
  • `::before` and `::after` create virtual elements before and after the *content* of an element, not the element itself - http://stackoverflow.com/questions/5362811/can-i-make-the-css-after-pseudo-element-append-content-outside-the-element/5362843#5362843 – BoltClock Jul 20 '12 at 20:22

1 Answers1

9

The old CSS3 Generated and Replaced Content Module had a proposal for an ::outside pseudo-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 ::outside pseudo-element are described here:

Enable support for CSS3 ::outside pseudoelement

Community
  • 1
  • 1
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • And no one browser want to implement full support after 9 years. Author of this module = author of ACID tests. – Rustam Jul 20 '12 at 20:12