Invisible element with visible :after pseudo-element not working in IE11

Question

I was able to use this hack: How can I replace text with CSS? --to replace a closing 'X' button on a lightbox from a third party library I'm using. It works great in all browsers but IE11. It seems IE hides both the element and the pseudo-element even though visibility: visible is set on the pseudo. If I toggle visibility using dev tools, they both show up.

Note: if the actual 'X' button were an actual 'X' character, I could easily style it as needed. Unfortunately, they use a symbol, so I have to resort to using this method to "replace" it with an actual X, to match the design standards of the site.

CSS for the button:

/* Hack to replace the close button text */
#_pendo-close-guide_ {
    visibility: hidden;
}

#_pendo-close-guide_:after {
  content:'X'; 
  visibility: visible;
  display: block;
  position: absolute;
    right: 6px;
  top: 8px;
  font-size: 17px;
  font-weight: 200 !important;
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, sans-serif;
  color: #444;
} 

Any help would be much appreciated.

Answer 1

To get this working in IE, I had to use the old "text-indent: -9999px" trick:

/* Hack to replace the close button text */
#_pendo-close-guide_ {
      text-indent: -9999px;
      line-height: 0;
}

/* Hack to replace the close button text */
#_pendo-close-guide_:after {
  content:'X'; 
  position: relative;
  right: 6px;
  top: 4px;
  line-height: initial;
  text-indent: 0;
  display: block;
  font-size: 17px;
  font-weight: 200 !important;
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, sans-serif;
  color: #444;
}