How can I replace text with CSS?

Solution 1:

Or maybe you could wrap 'Facts' round a <span> as follows:

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

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

Solution 2:

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.

You can replace text through CSS. Let's replace a green button that has the word 'hello' with a red button that has the word 'goodbye', using CSS.

Before:

After:

See http://jsfiddle.net/ZBj2m/274/ for a live demo:

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. Note display: none on the original element doesn't work.

Solution 3:

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

Solution 4:

Based on mikemaccana’s answer, this worked for me

button {
  position: absolute;
  visibility: hidden;
}

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

<button>original</button>

§ Absolute positioning

an element that is positioned absolutely is taken out of the flow and thus takes up no space when placing other elements.