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

Question

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

SEO在这里并不重要。

我正在使用这种方法：

html

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

css

.company-name{font-size: 0}

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

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

score 6 · Accepted Answer

如果你真的需要在 CSS 中做这样的事情，下面的代码更合乎逻辑，风险也更小（考虑到通常的 CSS 警告）：

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

That is, use an element with empty content, so you don’t need any trick to hide the dummy content.

score 1 · Accepted Answer

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

不，其他所有效果基本上都会导致使用相同的方法：隐藏原始内容并用伪元素（::after或::before）替换它。

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

score 1 · Accepted Answer

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

除了您已经完成的方式之外，实际上没有任何其他方式可以执行您在 CSS 中提出的要求：该content属性在大多数 CSS 样式中不可用，因为 CSS 不适合放置内容。

3 回答 3