显示 :before 但仅使用 CSS 隐藏元素答案

【问题标题】：Showing :before but hiding element with CSS only显示 :before 但仅使用 CSS 隐藏元素
【发布时间】：2014-03-17 15:23:42
【问题描述】：

我有一个文档，我无法编辑（Shopify 上的付款页面）的 HTML，因此出于安全原因，他们不允许您编辑此文档（不幸的是，与 javascript 相同）。

但是，您可以编辑自己的 css。所以这就是为什么它必须是css 只有在可能的情况下。

我想基本上通过css 替换文本。我知道这本身是不可能的，但这就是我设法做下一件最好的事情的方式：

HTML

<P>This is some nice text here</p>

CSS

p:before{
  content:'This text has replaced the original.';
  visibility:visible;
}

p{
  visibility:hidden;
}

JsFiddle - Codepen (for viewing in IE8/EI9)

在大多数情况下，这是可行的，目前是我们的首选方法。

但是，在 IE8/EI9 中，不支持 visibility。 (Source)

我尝试过其他方法，例如：

display:none;

和

opacity:0;

但他们都隐藏了:before。

我也尝试将文本颜色更改为背景颜色，但我们不喜欢在突出显示时让文本仍在屏幕上的想法（我知道，乞丐不能成为选择者）。

我的问题是：在 IE8/EI9 中是否有这种方法的替代方案？

谢谢。

【问题讨论】：

标签： html css internet-explorer-8 internet-explorer-9

【解决方案1】：

您可以使用字体大小：http://codepen.io/anon/pen/KuJln

p:before{
  content:'This text has replaced the original.';
  font-size:16px;/* if rem not supported */
  font-size:1rem;
}

p{
  font-size:0.01px;/* 0+ for ie , yep :) */
}

【讨论】：

哇！我没有尝试过这个，因为我认为它不适用于0.0 数字！这正是我正在寻找的！谢谢！

【解决方案2】：

您可以更改color。

http://jsfiddle.net/Epte8/1/

如果你没有纯色背景，你可以使用rgba for IE9 来设置颜色的透明度，但不幸的是，IE8 不支持（我认为你不能设置透明文本颜色那里）。

【讨论】：

啊，是的，谢谢！愚蠢地忘记提及这一点！虽然它有效，但我们不喜欢文本仍然“在页面上”的想法。不过，这绝对是一个可行的选择，因为我忘记在我的问题中提及它，所以我会 +1。 :)