带有可见的不可见元素：伪元素在 IE11 中不起作用

Question

我能够使用此 hack：How can I replace text with CSS? -- 替换我正在使用的第三方库中灯箱上的关闭 'X' 按钮。它适用于除 IE11 以外的所有浏览器。似乎 IE 隐藏了元素和伪元素，即使 visibility: visible 设置在伪元素上。如果我使用开发工具切换可见性，它们都会出现。

注意：如果实际的 'X' 按钮是实际的 'X' 字符，我可以根据需要轻松设置样式。不幸的是，他们使用了一个符号，所以我不得不使用这种方法 "replace" 它带有一个实际的 X，以符合网站的设计标准。

CSS 按钮：

/* 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;
}

如有任何帮助，我们将不胜感激。

Answer 1

为了让它在 IE 中正常工作，我不得不使用旧的 "text-indent: -9999px" 技巧：

/* 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;
}

Answer 2

我的解决方案受到 @Tim's 回答的启发。但是，由于我的具体情况，我无法使用 text-indent，所以我使用了

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

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

它在 IE11 和其他浏览器中工作。

带有可见的不可见元素：伪元素在 IE11 中不起作用

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

css

visibility

internet-explorer-11