Pseudo element on ul element not working in IE11

Question

I have a menu set up with a pseudo element serving as the background color. The pseudo element was needed because while the menu itself isn't full-width, the background needed to be so. I've set up what I thought was a pretty simple element.

Here's my html with comments

<div class="primary-menu">
  <nav class="menu-primary-menu-container">
    <ul id="menu-primary-menu" class="menu">
      <li id="menu-item-7031" class="first-menu-item menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-7031">
        //hovering this li triggers the sub-menu visibility, the pseudo element is also lined up to this element
        <a href="#">Solutions</a>
        <ul class="sub-menu">
          //pseudo element should show up here
          <li id="menu-item-8916" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-8916"><a href="#">Solutions Overview</a></li>
          <li id="menu-item-7787" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7787"><a href="#">Data Lake</a></li>
          <li id="menu-item-7541" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7541"><a href="#">Real-Time Analytics</a></li>
          <li id="menu-item-7540" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-7540"><a href="#">Cloud Data Integration</a>
            <ul class="sub-menu">
              <li id="menu-item-7854" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-7854"><a href="#">Data Integration into Azure</a>
                <ul class="sub-menu">
                  <li id="menu-item-8393" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-8393"><a href="#">Azure FAQ</a></li>
                  <li id="menu-item-8394" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-8394"><a href="#">Getting Started with Azure</a></li>
                </ul>
              </li>
              <li id="menu-item-7853" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-7853"><a href="#">Data Integration into AWS</a>
                <ul class="sub-menu">
                  <li id="menu-item-11470" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-11470"><a href="#">Getting Started with AWS</a></li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </nav>
</div>

And the relevant CSS

@media (min-width: 768px)
  .primary-menu .menu-primary-menu-container #menu-primary-menu > li {
    margin: 0 15px;
    position: relative;
  }
}

  .primary-menu #menu-primary-menu > li > .sub-menu:before {
    -ms-flex-item-align: center;
    -ms-grid-row-align: center;
    align-self: center;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
    content: "";
    display: block;
    height: 470px;
    position: absolute;
    top: -1rem;
    width: calc(100vw + 1400px);
    z-index: -1;
  }

In IE11 the pseudo element's properties are all crossed out and being applied to the .sub-menu ul that the before element should spawn from. I've added a display: block; property per the suggestion here, but that didn't help my problem.

This is what shows up in IE11 when I inspect the element.

I have a working code pen here which also displays the issue.

Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** (not remote links) preferably in a **Stack Snippet**. Although you have provided a link, if it was to become invalid, your question would be of no value to other future SO users with the same problem. See [**Something in my website doesn't work can I just paste a link**](http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work-can-i-just-paste-a-link-to-it). — Paulie_D, Apr 20 '18 at 19:04
I'm confused. The code to reproduce the issue is included within the question. — Kathryn Crawford, Apr 20 '18 at 19:07
@muecas, yes if you look at it on another browser, the background color appears across the entire screen. If you inspect the element in IE11 the :before pseudo element is not even being produced. — Kathryn Crawford, Apr 20 '18 at 19:08

score 1 · Accepted Answer · answered Apr 20 '18 at 19:10

As my experience you can't inspect the ::after or ::before with IE, so the properties are all crossed out, just because in some way they don't belong to the selected element itself, but to its pesudo.

The only way i found to made it look like in other browsers is changing some properties values of your style for the ::before:

header .wrapper .primary-menu #menu-primary-menu > li > .sub-menu::before {
    -ms-flex-item-align: center;
    -ms-grid-row-align: center;
    align-self: center;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
    content: "";
    display: block;
    height: 470px;
    position: absolute;
    top: -1rem;
    /* Set width to auto */
    width: auto;
    z-index: -1;
    /* Make a huge overflow (i doesn't have to be that big) */
    right: -9999px;
    left: -9999px;
}

Hope it helps.

You're a lifesaver! Thanks so much for your wisdom :) – Kathryn Crawford Apr 20 '18 at 19:19 — Kathryn Crawford, Apr 20 '18 at 19:19

Pseudo element on ul element not working in IE11

1 Answers1