CODEWITHSUNDEEP
htmlcsspseudo-elementcss-content
Michele ODell
Michele ODell

Reputation: 41

li::before not working in IE9

I have a utility nav set up as an unordered list and I would like to use li::before to insert a pipe "|" symbol between each link in the utility nav.

Here is my utility nav...

<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:[email protected]">Can't Find It?</a> </li>
    </ul>
</div>

Here are my styles.

.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 show up great in Chrome and Safari, but don't show up in IE9. In fact IE9 ignores the enter .horizontalnavlinks li + li::before style.

Everything I read says IE supports pseudo styles. What gives?

Upvotes: 3

Views: 2107

Answers (1)

Andr&#233; Dion
Andr&#233; Dion

Reputation: 21718

Ensure you have a proper doctype declaration (e.g., <!DOCTYPE html>) as IE9 running in quirksmode will not support pseudo-elements.

See this SO thread for more details on the use of pseudo-elements in IE9.

Upvotes: 2

Related Questions