[css3-selectors][css-pseudo-4] Add Pseudo Element ::around or ::wrap simmilar to ::before / ::after

[inoas]

In essence display: flex, display: grid and display: table + float hacks already give a lot of flexibility on rendering layout. However more often than not authors have to add div / span just for rendering/presentation purposes.

Proposal

Add ::around or ::wrap pseudo-elements.

Example Use Case

/* horizontally centered article having a max-width */
article {
  max-width: 500px;
  margin: 0 auto;
}
article.with-background::around, /* fully stretched background if class given */
article.nth(2)::around { /* fully stretched background on every 2nd element */
  display: block;
  width: 100%;
  background: orange;
}

Usually these presentional-only boxes would require extra divs in the dom.

<div class="max-width-container">
	<article>
		...
	</article>
</div>
<article>
	...
</article>

VS

<article>
	...
</article>
<article>
	...
</article>

OR

<article class="with-background">
	...
</article>

Codepen Examples

Div Wrapper: http://codepen.io/anon/pen/jyWqqE
Pseudo Wrapper: http://codepen.io/anon/pen/JEGKKw

[SebastianZ]

Looks like a duplicate of issue #588.

Sebastian

[inoas]

I think @Hixie is right when he said it WONTFIX in HTML and I think @tabatkins is wrong when he says that it WONTFIX on either level. We are getting close due to display: grid and display: flex but it is not always sufficient. #588 has enough and good examples.

From #588 I can see that implementors don't see it as something to be implemented easily. However I wonder how ::before and ::after made it then. What is the difference here? A pseudo element is being injected for the cases of ::before as well as ::wrap.

Didn't know #588 existed and strange enough I came to a very similar solution.
At least the W3C guides say that you should think about authors first.

[inoas]

Similar to ::before/::after http://codepen.io/anon/pen/bggwVG ::wrap (or ::around) would inherit properties.

Question is what happens when say div's display is set to block and div::around's display is set to say inline?

[fantasai]

Closing as duplicate of #588. We should solve these use cases directly, e.g. by extending the background clip area or having more powerful options for controlling padding.