last-child:after not rendering in Chrome? Pseudo-element use issue?

Question

I'm running into an issue with Chrome only (works fine in FF and Safari, not worrying about IE) that makes me wonder if this is a bug, if I'm using the pseudo elements incorrectly, or if you're not supposed to combine pseudo classes and pseudo elements.

What happens is that Chrome seems to see content="-"; in the last-child:after rule, but doesn't render it. If I open the developer tools and fiddle with some of the properties (like turning the margin on and off), it suddenly shows up.

Here's the stripped down code:

HTML:

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>

<div id="footer">
    <p>This is a footer</p>
</div>

CSS:

ul { text-align: center; }

#footer { text-align: center; margin-top: 200px;}

li:first-child:before, li:last-child:after, #footer:before {
    display: block;
    content: "-";
    color: red;
    margin: 10px 0;
}

Also here: http://jsfiddle.net/D4T6L/4/

It doesn't seem to make a difference whether I declare it separately or all together like I have it.

Can someone shed some light on what I'm doing wrong?

What version of Chrome are you using? For what it's worth, it already works in Chrome 11.0.696.3 (dev channel). — thirtydot, Mar 15 '11 at 20:34
Looks OK for me using Chrome 11/Windows 7. I see 3 red minus signs as expected. One before the first `li`, one after the last `li` and one before the footer. And your CSS validates as CSS3 just fine :) — andyb, Mar 15 '11 at 20:35
Using Chrome 10.0.648.133/osx 10.6. Could be my machine... I've not tested it elsewhere. — , Mar 15 '11 at 20:42
I can confirm that your issue happens with Chrome 10.0.648.134/Windows 7. So, it looks like it was a bug they've already fixed, but it's not been pushed to the Stable channel yet. I'll see if I can find a workaround. — thirtydot, Mar 15 '11 at 20:47

Eric Wendelin · Accepted Answer · 2012-03-13T18:32:26.827

8

Looks like a Chrome bug. This works:

<ul>
  <li>One</li>
  <li>Two</li>
  <li id="blah">Three</li>
</ul>
<div id="footer">
  <p>This is a footer</p>
</div>

With CSS referencing the last element by ID:

ul { text-align: center; }   

#footer { text-align: center; margin-top: 200px;}

li:first-child:before, li:last-child:after, #footer:before {
   display: block;
   content: "-";
   color: red;
   margin: 10px 0;
}

#blah { }

If you remove the "#blah{}", reverts to buggy behavior.

EDIT: This has been fixed a long time ago in Chrome

edited Mar 13 '12 at 18:32

answered Mar 15 '11 at 20:58

Eric Wendelin

39,122
8
59
87

1

+1, workaround works. How odd. – thirtydot Mar 15 '11 at 21:04
Works like a charm, I'll use this workaround until the updates roll out. Thanks Eric! On a side note, do you know why the blank id triggers the :after element? – Mar 15 '11 at 21:06
I've added it the the Chrome bug in hopes that they can fix it. – Eric Wendelin Mar 15 '11 at 21:06
1

Nice (and strange!) workaround. +1 from me – andyb Mar 15 '11 at 21:34
@Nathan - I don't know that, sorry. – Eric Wendelin Mar 18 '11 at 18:14
year almost passed and the bug still exists... grr – Picard Jan 15 '16 at 09:43

score 2 · Answer 2 · answered Mar 15 '11 at 20:50

2

It's a bug in Chrome, which has already been fixed in the Dev channel builds, so it's just a matter of time until it's fixed in Stable. (see the comments on this question)

Here's a bug report:

http://code.google.com/p/chromium/issues/detail?id=71213

Here's another one:

http://code.google.com/p/chromium/issues/detail?id=71052

answered Mar 15 '11 at 20:50

thirtydot

210,355
44
377
337

Thanks @thirtydot for finding that. At least I know now it's the browser and not my code! :) – Mar 15 '11 at 20:55

last-child:after not rendering in Chrome? Pseudo-element use issue?

2 Answers2

Linked