- From: inoas via GitHub <sysbot+gh@w3.org>
- Date: Tue, 10 Jan 2017 15:18:04 +0000
- To: public-css-archive@w3.org
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