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

inoas has just created a new issue for 
https://github.com/w3c/csswg-drafts:

== [css3-selectors][css-pseudo-4] Add Pseudo Element ::around or 
::wrap simmilar to ::before / ::after ==
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
```css
/* 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.

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

VS

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

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

Please view or discuss this issue at 
https://github.com/w3c/csswg-drafts/issues/877 using your GitHub 
account

Received on Tuesday, 10 January 2017 15:18:09 UTC