如何用CSS替换文本？

本文翻译自：How can I replace text with CSS?

How can I replace text with css using a method like this: 如何使用以下方法将文本替换为CSS：

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

Instead of ( img[src*="IKON.img"] ), I need to use something that can replace text instead. 而不是（ img[src*="IKON.img"] ），我需要使用可以替换文本的东西。

I have to use [ ] to get it to work. 我必须使用[ ]使其正常工作。

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

I need to replace "Facts". 我需要替换“事实”。

---

#1楼

参考：https://stackoom.com/question/x8dk/如何用CSS替换文本

---

#2楼

Or maybe you could wrap 'Facts' round a <span> as follows: 或者，您可以将“事实”环绕在<span> ，如下所示：

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

Then use: 然后使用：

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

---

#3楼

Obligatory : This is a hack: CSS isn't the right place to do this, but in some situations - eg, you have a third party library in an iframe that can only be customized by CSS - this kind of hack is the only option. 强制性 ：这是一种hack：CSS不是执行此操作的正确位置，但是在某些情况下-例如，您在iframe中拥有只能由CSS定制的第三方库-这种hack是唯一的选择。

You can replace text through CSS. 您可以通过CSS替换文本。 Let's replace a green button with 'hello' with a red button that says 'goodbye' , using CSS. 让我们使用CSS 将绿色按钮“ hello”替换为红色按钮“ goodbye” 。

Before: 之前：

After: 后：

See http://jsfiddle.net/ZBj2m/274/ for a live demo: 观看http://jsfiddle.net/ZBj2m/274/的实时演示：

Here's our green button: 这是我们的绿色按钮：

<button>Hello</button>

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

Now let's hide the original element, but add another block element afterwards: 现在，我们隐藏原始元素，但之后添加另一个块元素：

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

Note: 注意：

• We explicitly need to mark this as a block element, 'after' elements are inline by default 我们明确需要将其标记为块元素，默认情况下，“后”元素为内联
• We need to compensate for the original element by adjusting the pseudo-element's position. 我们需要通过调整伪元素的位置来补偿原始元素。
• We must hide the original element and display the pseudo element using visibility . 我们必须隐藏原始元素，并使用visibility显示伪元素。 Note display: none on the original element doesn't work. 注意display: none原始元素上的所有元素均不起作用。

---

#4楼

Based on mikemaccana's answer , this worked for me 根据mikemaccana的回答 ，这对我有用

button {
  position: absolute;
  visibility: hidden;
}

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

§ Absolute positioning 绝对定位

an element that is positioned absolutely is taken out of the flow and thus takes up no space when placing other elements. 绝对定位的元素将从流中移出，因此在放置其他元素时不占用空间。

---

#5楼

This worked for me with inline text. 这对我来说适合内联文本。 Tested in FF, Safari, Chrome and Opera 经过FF，Safari，Chrome和Opera的测试

<p>Lorem ipsum dolor sit amet, consectetur <span>Some Text</span> adipiscing elit.</p>


span {
visibility: hidden;
word-spacing:-999px;
letter-spacing: -999px; 
}

span:after {
content: "goodbye";
visibility: visible;
word-spacing:normal;
letter-spacing:normal; 
}

---

#6楼

If you're willing to use pseudo elements and let them insert content, you can do the following. 如果您愿意使用伪元素并让它们插入内容，则可以执行以下操作。 It doesn't assume knowledge of the original element and doesn't require additional markup. 它不假定您了解原始元素，并且不需要其他标记。

.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 Example JSFiddle示例