Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[css-display-3] Clarify whether display: contents applies to ::before and ::after #1345

emilio opened this issue May 10, 2017 · 4 comments


None yet
6 participants
Copy link

commented May 10, 2017

I have a (probably bitrotted already) implementation for this in Blink, but I talked about this with @dbaron a while ago and asked me to file this in order to clarify it, given Gecko doesn't implement it.

Gecko always treats display: contents in ::before and ::after as display: inline. It's not clear to me whether display: contents in pseudo-elements is really useful at all, and the implementation is complex.

It's pretty much non-observable, except for cases like (where you specify reset properties on the pseudo, like border).

I think it's nice for consistency, but I wouldn't be too sad if it didn't apply to these pseudo-elements.

@mrego mrego added the css-display-3 label May 10, 2017


This comment has been minimized.

Copy link

commented May 10, 2017

It's not much clear, but browsers seem to believe that display: contents should join different texts into a single run of text (#1281). Then, in the following example, "FooBar" would be a single flex item:

div { display: flex; justify-content: space-between }
div::after { content: 'Bar'; display: contents }

So in this case whether ::before and ::after support display: contents or not is observable by other means than box-related properties on the pseudo-elements.

I think display: contents should apply to these pseudo-elements.


This comment has been minimized.

Copy link

commented May 10, 2017

As @Loirooriol points out, it definitely has an observable effect, and is straightforward to define. Basically, the following two bits of markup:



<style>div::before { content: "Foo"; }</style>

...should be completely indistinguishable as far as CSS is concerned. There is no reason for the two to diverge in any way.

That said, I also wouldn't be too sad if we defined that it didn't work. It's just inconsistent and breaks a constant that has nicely applied to ::before and ::after previously.

@tabatkins tabatkins added the Agenda+ label May 16, 2017


This comment has been minimized.

Copy link

commented May 24, 2017

The CSS Working Group just discussed, and agreed to the following resolutions:

  • RESOLVED: display:contents applies to ::after and ::before
The full IRC log of that discussion <myles> TOPIC:
<myles> Github topic:
<myles> s/write/right/
<myles> fantasai: <restates the topic>
<myles> fantasai: TabAtkins and i are leaning toward "yes" but we aren't particularly resolute
<myles> fantasai: any opinions/
<myles> fantasai: ?
<myles> Rossen: it is unclear, if we say "no," what is observable?
<myles> fantasai: you can put a border on ::after, and the border will disappear if you say display:contents
<myles> fantasai: because the box will disappear
<myles> Rossen: was this just an oversight?
<myles> fantasai: just needed clarification
<myles> Rossen: this works for us
<myles> Rossen: objections?
<myles> RESOLVED: display:contents applies to ::after and ::before

This comment has been minimized.

Copy link

commented Jul 5, 2017

Closing as no change, because the WG decided to stick with it applying, and the effects of that just fall out of the definition.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.