Encountering a peculiar issue specific to Chrome (no problems in FF and Safari, not concerned about IE) that raises questions regarding whether it's a bug, incorrect usage of pseudo elements, or the compatibility of combining pseudo classes and pseudo elements.
The problem arises when Chrome appears to detect content="-"; in the last-child:after rule but fails to display it. Strangely, manipulating certain properties in the developer tools (like toggling the margin on and off) causes the content to suddenly appear.
Below is the simplified code snippet:
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 available here: http://jsfiddle.net/D4T6L/4/
Whether declared separately or combined as shown does not seem to affect the outcome.
Could someone provide insight into what might be going wrong?