如何用CSS替换文本？

Question

我该如何使用类似这样的方法，在CSS中替换文本：

.pvw-title img[src*="IKON.img"] { visibility:hidden; }

我需要使用取代文本的方法，而不是使用 ( img[src*="IKON.img"] )。

我必须使用 [ ] 才能使其有效。

<div class="pvw-title">事实</div>

我需要替换 "事实"。

- MokiTa

---

老实说，最好使用JavaScript来完成这个任务。 - Sir

使用JavaScript需要DOM加载，因此会出现FOUC。我想通过避免在服务器端生成HTML（从而允许HTML被积极缓存并从CDN提供）的方式来替换文本为从查询字符串中提取的内容，同时避免FOUC。 - nemequ

问题是如何使用CSS来实现。我正在使用一个只允许我更改CSS的CMS，这就是为什么我在谷歌搜索答案时会进入这个页面而不是其他页面的原因。因此，我们回答被问到的问题，而不是询问提问者的情况为什么不同。 - felwithe

如果有人和我一样不知所措：FOUC - Jason C

Answer 1

或者你可以以以下方式将“Facts”包装在 <span> 中：

.pvw-title span {
  display: none;
}
.pvw-title:after {
  content: 'whatever it is you want to add';
}

<div class="pvw-title"><span>Facts</span></div>

- Matthew Cachia

---

不错，但这是对HTML的更改而不仅仅是CSS。 - mikemaccana

有时这是你唯一的选择。 - locrizak

应该使用visibility: hidden来隐藏伪元素，这样span { display: none; }也会被隐藏。 - xryl669

"display: none;" 和 "visibility: hidden;" 都可以隐藏伪元素。 - Facundo Colombier

@Mathew 隐藏了 span 元素，但是添加了伪元素到 div 中，所以伪元素不应该被隐藏（无论使用可见性还是显示属性）。 - dewtea

Answer 2

必要的：这是一种hack方法：CSS不是正确的应用位置，但在某些情况下 - 例如，在iframe中有一个只能通过CSS定制的第三方库时 - 这种hack方法是唯一的选择。

您可以通过CSS替换文本。 让我们用CSS将带有单词“hello”的绿色按钮替换为带有单词“goodbye”的红色按钮。

之前：

之后：

请参见http://jsfiddle.net/ZBj2m/274/以获取实时演示：

这是我们的绿色按钮：

<button>Hello</button>

button {
  background-color: green;
  color: black;
  padding: 5px;
}

现在让我们隐藏原始元素，但在后面添加另一个块级元素：

button {
  visibility: hidden;
}
button:after {
  content:'goodbye'; 
  visibility: visible;
  display: block;
  position: absolute;
  background-color: red;
  padding: 5px;
  top: 2px;
}

注意：

• 我们需要明确将此标记为块级元素，“after”元素默认为内联元素。
• 我们需要通过调整伪元素的位置来补偿原始元素。
• 我们必须使用visibility隐藏原始元素并显示伪元素。请注意，对原始元素使用display: none无效。

- mikemaccana

---

这在ie 10中不起作用，有什么修改的想法吗？ - Solmead

如果有人想知道，display: none; 不起作用是因为 ::after 的实际意思是“在此元素内部的末尾位置”，并非在元素外隐藏。 - Ry-

很不幸，“修改”按钮不再像一个按钮一样工作了。这是一个很好的例子，只是它不适用于按钮。 - xryl669

display: none; 和 visibility: hidden; 都可以隐藏伪元素。 - Facundo Colombier

这种 hack 并不是通用的。你需要考虑到生成的元素将保留原始元素的尺寸。因此，你替换的文本应该与原来的文本具有相同的宽度和高度。 - venimus

Answer 3

如果你愿意使用伪元素并让它们插入内容，你可以按照以下方式操作。它不需要原始元素的知识，也不需要额外的标记。

.element {
  text-indent: -9999px;
  line-height: 0; /* Collapse the original line */
}

.element::after {
  content: "New text";
  text-indent: 0;
  display: block;
  line-height: initial; /* New content takes up original line height */
}

JSFiddle示例

- James van Dyke

---

这个答案适用于其他答案不适用的地方，比如<th>元素内部的文本节点。 - Chris Kerekes

这个方法很有效。在我的情况下，将主要元素的 line-height: 0 和 color: transparent 设置，并在伪元素上重置这些值就可以完成工作（不需要调整 text-indent）。 - dontGoPlastic

应该使用 line-height: normal 而不是 initial 吗？ - BenMorel

使用text-indent的原因是，如果原始文本较长，则元素保持旧文本的大小，而不会缩小到新文本的大小（假设这是您想要的）。 - Chris Janssen

text-indent: -9999px; 在IE上有效。而visibility: hidden; 方法在IE上无效。 - Tom Stermitz

Answer 4

根据mikemaccana的答复，这对我有用。

button {
  position: absolute;
  visibility: hidden;
}

button:before {
  content: "goodbye";
  visibility: visible;
}

<button>original</button>

§ 绝对定位

绝对定位的元素脱离文档流，在放置其他元素时不占据空间。

- Zombo

---

我认为这个答案比其他答案更好，因为它使用了同一行内的文本替换，也就是说，它不会强制在文本中断行（针对我特定的 HTML 和 CSS 结合方式）。 - pgr

Answer 5

这很简单，短小精悍，而且有效。不需要额外的HTML。

.pvw-title { color: transparent; }

.pvw-title:after {
        content: "New Text To Replace Old";
        color: black; /* set color to original text color */
        margin-left: -30px;
        /* margin-left equals length of text we're replacing */
    }

我需要替换链接文本，除了主页之外，用于WooCommerce 面包屑导航

Sass/Less

body.woocommerce .woocommerce-breadcrumb > a[href$="/shop/"] {
    color: transparent;
    &:after {
        content: "Store";
        color: grey;
        margin-left: -30px;
    }
}

CSS

body.woocommerce .woocommerce-breadcrumb > a[href$="/shop/"] {
    color: transparent;
}

body.woocommerce .woocommerce-breadcrumb > a[href$="/shop/"]&:after {
    content: "Store";
    color: @child-color-grey;
    margin-left: -30px;
}

- 9ete

Answer 6

为了在使用"after"和隐藏原始内容之后，你可以使用以下技巧：

使用以下Hack：

.pvw-title {
  font-size: 0;
}
.pvw-title:after {
  font-size: 1rem;
  content: 'I am a totally different piece of text!';
}

<div class="pvw-title">Facts</div>

将font-size设置为0可使文本消失，但不会将实际元素从视口中移除。因此，:after选择器有效，并且应在所有浏览器上显示。

- Thatkookooguy

Answer 7

你不能，嗯，你可以。

.pvw-title:after {
  content: "Test";
}

这将在元素当前内容之后插入内容，而不是实际替换它，但您可以选择使用空的div，并使用CSS添加所有内容。

但是，虽然你多少可以这样做，但你不应该这样做。实际内容应该放在文档中。content属性主要用于小的标记，如应出现引用的文本周围的引号。

- GolezTrol

---

我非常确定我使用了一种代码来替换文本，类似于这种方法：'<div class="pvw-title">事实</div><div class="pvw-title">事实</div>' 我不能使用:after，因为我有多个具有相同名称的div类 :( - MokiTa

那在浏览器上的兼容性有多广泛呢？我认为从长远来看，JavaScript会是这种灵活性的更好选择。 - Sir

现代浏览器都支持它。对于较旧的IE版本，我不确定，但我猜可以在quirksmode.com上查找。-编辑- 它确实可以：http://www.quirksmode.org/css/user-interface/content.html - GolezTrol

Answer 8

尝试使用:before和:after。一个在HTML渲染后插入文本，另一个在HTML渲染前插入文本。如果您想替换文本，请将按钮内容留空。

此示例根据屏幕宽度设置按钮文本。

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
  button:before {
    content: 'small screen';
  }
  @media screen and (min-width: 480px) {
    button:before {
      content: 'big screen';
    }
  }
</style>
<body>
  <button type="button">xxx</button>
  <button type="button"></button>
</body>

按钮文本：

1. 使用:before

   大屏幕xxx

   大屏幕

2. 使用:after

   xxx大屏幕

   大屏幕

- live-love

Answer 9

我发现最简单的方法是将元素的 font-size 设为 0 像素，然后在创建 :after 伪元素时覆盖它并设置任何字体大小。以下是示例：

.pvw-title { 
    font-size:0px;
}

.pvw-title:after {
        content: "Hello";
        font-size:15px !important;
}

- ASammour

Answer 10

伪元素和CSS可见性的文本替换

HTML

<p class="replaced">Original Text</p>

CSS

.replaced {
    visibility: hidden;
    position: relative;
}

.replaced:after {
    visibility: visible;
    position: absolute;
    top: 0;
    left: 0;
    content: "This text replaces the original.";
}

- Ahsan Aftab