如何使用 CSS 替换或更改文本？ [复制]答案

【问题标题】：How to use CSS to replace or change text? [duplicate]如何使用 CSS 替换或更改文本？ [复制]
【发布时间】：2012-04-30 01:41:31
【问题描述】：

如何使用 CSS 将“书签”替换为“链接”？

<div class="lfr-panel-title"> 
  <span> Bookmarks </span> 
</div>

我知道 CSS 不是为此而设计的，但是有跨浏览器的方式吗？

【问题讨论】：

你不能用 CSS 替换内容。
是否有一种跨浏览器的方式来处理 CSS 并非设计用于的 CSS？
@loktar 是正确的——但这个概念是完全错误的。 CSS 用于样式，而标记用于内容。我敢肯定你知道这一点......这只是一个规则，对吧？哦，但是让我们也在这里，那里，等等。它很快就会变得很粘 - 更不用说搜索引擎和屏幕阅读器仍然会阅读“书签”这一事实。

标签： css

【解决方案1】：

你可以做这样疯狂的事。

.lfr-panel-title span{
   display:none;
}

.lfr-panel-title:after{
   content: "links";   
}

但就像每个人都指出的那样……不推荐。

【讨论】：

有效。但就是这样一个倒退的概念。 +1。
@Bosworth99 哈哈，是的，我知道，但我还是想尝试一下。
+1。但需要注意的是，它在IE8下的任何IE浏览器中都不起作用。
好吧，在广阔的时空中的某个坐标，我们需要放弃对 IE 6 和 IE 7 的支持，否则我们只能说......我们将在下一个十年停留在网络石器时代？说得通？？一个简单的“该网站适用于 IE 7 , 8 , 9 , 10 和所有其他浏览器”就足以引起变化，即使谷歌已经放弃了对 IE 6 的支持，而 Facebook 至少需要 IE 8 才能工作\
我没有辩论，我只是希望人们在可用的情况下使用该技术：P 否则使用垫片 :-D，使用 javascript 垫片很容易，但如果 OP 想要在浏览器上执行它怎么办？功能被禁用？进一步在大多数现代浏览器上，CSS 是 h/w 加速的，并且在不占用详尽的 javascript web 应用程序的情况下获得了一点速度优势，因此我建议按原样使用 css，而不是仅仅因为 IE 7 不支持它而放弃整个 hack ，可以使用 JavaScript 为整个事情编写一个简单的 shim :-) 希望这能解释为什么我们陷入了一场毫无意义的辩论

【解决方案2】：

CSS 不会更改或替换精确文本。

您需要使用某种客户端语言（JavaScript、jQuery 等）或服务器端语言（php、ASP.NET 等）来实现。

作为@Loktar states，您可以通过:before 和:after 伪选择器模仿该功能。

虽然不推荐用于该用途，而且考虑到 IE，它也不完全跨浏览器兼容。通过QuirksMode查看跨浏览器兼容性图表：

【讨论】：

【解决方案3】：

简短的回答：不。

长答案：CSS 不打算或非常有能力操纵内容。您可以使用背景图像替换文本，但这不是很容易访问。各种 :after 或 :before 技术也不能很好地跨浏览器兼容。

您将需要 javascript 来以这种方式操作内容。

【讨论】：

您能否详细介绍一下哪些浏览器不支持伪元素选择器？ because it looks like IE7 is the only one I should be concerned about