Any way to fix CSS3 content attribute flicker in Chrome?

Question

I've created a page where I use this type of styling:

nav ul li:before {
  content: " / ";
}
nav ul li:last-child:before {
  content: "";
}

Where most of the time, I want a "/" before the li elements except on the last one.

The problem is that in Chrome (only as far as I know), I sometimes get a little flicker of the "/", even though it's not supposed to be there. It shows up for a moment and then disappears.

Anyone else seen this or worked around it?

Answer 1

I'd file a bug report against Webkit (if you can reproduce in a webkit nightly) or Chrome if it's only in Chrome.

Answer 2

try

nav ul li:not(:last-child):before {
  content: " / ";
}