Last-child: после не рендеринга в Chrome? Проблема использования псевдоэлементов?

Я столкнулся с проблемой только с Chrome (отлично работает в FF и Safari, не беспокоясь об IE), что заставляет меня задаться вопросом, является ли это ошибкой, если я неправильно использую псевдо элементы, не предполагается комбинировать псевдоклассы и псевдоэлементы.

Что происходит, так это то, что Chrome, похоже, видит content="-"; в правиле last-child:after, но не отображает его. Если я открою инструменты разработчика и поиграю с некоторыми свойствами (например, включив и выключил марку), он неожиданно появится.

Здесь урезанный код:

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;
}

Также здесь: http://jsfiddle.net/D4T6L/4/

Кажется, не имеет значения, объявляю ли я его отдельно или все вместе, как будто у меня есть.

Может кто-то пролить свет на то, что я делаю неправильно?

Ответы

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

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 { }