使用CSS替换文本的最佳方法

Question

我想在我的项目中替换一个说“公司名称”的文字。用例是通过为不同公司维护不同的样式表，为不同公司生成文档（预处理后）。

搜索引擎优化不是很重要。

我正在使用这种方法：

HTML

<span class="company-name"> YourCompanyName </span>​

CSS

.company-name{font-size: 0}

.company-name:after{
      content: "New Company Name";
      font-size: 14px;
 }​

这里是jsFiddle http://jsfiddle.net/cN9gZ/

所以这是我的简单问题：有没有更好的方法做同样的事情，只使用css？

Answer 1

如果你真的需要在CSS中做这些事情，那么下面的内容会更合乎逻辑，风险也更低一些（考虑到常见的CSS注意事项）：

<style>
.company-name:after{
  content: "New Company Name";
}​
</style>
<span class="company-name"></span>

也就是说，使用内容为空的元素，因此您不需要任何技巧来隐藏虚拟内容。

Answer 2

  

有没有更好的方法来做同样的事情，只使用css？

没有。每个其他效果基本上会导致使用相同的方法：隐藏原始内容并将其替换为伪元素（::after或::before）。

请注意，搜索引擎可能会忽略样式表，这可能会导致一些奇怪的搜索结果。取代标记中的固定内容几乎总是更好的主意。几乎在所有情况下，只需要一个简单的查找和替换。可以停用JavaScript和CSS - 标记不能。

Answer 3

CSS真的不是为这种东西而设计的。你最好使用Javascript，甚至更好，只需改变HTML代码本身。

除了你的方式之外，没有任何其他方法可以在CSS中提出你所要求的内容：content属性在大多数CSS样式中都不可用，因为CSS不是'用于放置内容。