I have created a utility navigation bar using an unordered list and I am attempting to use li::before to add a pipe "|" symbol between each link in the navigation.
Below is my utility navigation...
<div class="horizontalnavlinks">
<ul>
<li><a href="/ets/">Time & Expense</a></li>
<li><a href="/intrnl/voffice/TAC/default2.asp">TAC</a></li>
<li><a href="/people/search/srchframe.asp">Employee Information</a></li>
<li><a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="99f0f7edebf8f7fcedfffcfcfdfeefdbdfabe1ffdbe3fcf6">©[email protected]</a></li>
</ul>
</div>
Here are the styles being applied.
.horizontalnavlinks ul
{
margin: 0;
padding: 0;
list-style-type: none;
}
.horizontalnavlinks ul li
{
display: inline;
}
.horizontalnavlinks li + li::before
{
content: " | ";
padding: 0 10px;
}
The pipes are displaying correctly in Chrome and Safari, but are not showing up in IE9. It seems that IE9 is ignoring the
.horizontalnavlinks li + li::beforeAlthough everything I have read indicates that IE supports pseudo styles, it appears to be causing issues in this case. What could be the reason for this inconsistency?