4

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.

Alex W
  • 37,233
  • 13
  • 109
  • 109
Tim
  • 441
  • 6
  • 16

2 Answers2

2

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;
}
Tim
  • 441
  • 6
  • 16
0

My solution was inspired by @Tim's answer. However, I wasn't able to use text-indent due to my specific case so I used

.container {
    position: relative;
    left: -9999px;
}

.container:after {
    position: relative;
    left: 9999px;
}

and it worked in IE11 and other browsers.

Alex W
  • 37,233
  • 13
  • 109
  • 109