这简单、简短、有效。不需要额外的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 /少

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;
}

文本替换伪元素和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.";
}

与我在其他每个答案中看到的不同，您不需要使用伪元素来将标记的内容替换为图像

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

    div.pvw-title { /* No :after or :before required */
        content: url("your URL here");
    }

很多人都说这是黑客。然而，我想添加更多最新的黑客，这利用了flexbox和rem的优势，即。

您不希望手动定位要更改的文本，这就是为什么您希望利用flexbox 您不希望显式地使用px对文本使用填充和/或边距，这对于不同设备和浏览器上的不同屏幕大小可能会给出不同的输出

这里是解决方案，简而言之，flexbox确保它自动定位完美，rem是更标准化(和自动化)的像素替代方案。

codeandbox带有下面的代码，并以截图的形式输出，请务必阅读下面的代码说明!

h1 {
  background-color: green;
  color: black;
  text-align: center;
  visibility: hidden;
}
h1:after {
  background-color: silver;
  color: yellow;
  content: "This is my great text AFTER";
  display: flex;
  justify-content: center;
  margin-top: -2.3rem;
  visibility: visible;
}
h1:before {
  color: blue;
  content: "However, this is a longer text to show this example BEFORE";
  display: flex;
  justify-content: center;
  margin-bottom: -2.3rem;
  visibility: visible;
}

注意:对于不同的标签，你可能需要不同的rem值，这个值只适用于h1，并且只适用于大屏幕。但是使用@media，你可以很容易地将其扩展到移动设备。

我发现的最简单的方法是使元素font-size: 0px，然后在创建:后pseudo时用任何字体大小覆盖它。在下面的例子:

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

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

强制性:这是一个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'元素默认为内联元素 我们需要通过调整伪元素的位置来补偿原始元素。 我们必须隐藏原始元素，并使用可见性显示伪元素。注意显示:原始元素上的none无效。