html - 显示 :before but hiding element with CSS only

Question

我有一份无法编辑 HTML 的文档(Shopify 上的付款页面)，因此出于安全原因，他们不允许您编辑此文档(不幸的是，与 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 中运行？

谢谢。

Answer 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 :) */
}