如果没有技巧，这是不可能的。这里有一种通过用文本的图像替换文本的方法。

.pvw-title{
    text-indent: -9999px;
    background-image: url(text_image.png)
}

这类事情通常是用JavaScript完成的。下面是如何用jQuery完成的:

$('.pvw-title').text('new text');

为了在使用后隐藏原始内容，你可以使用这个hack:

.pvw-title { 字体大小:0; ｝ .pvw-title:{后 字体大小:1快速眼动; 内容:“我是一段完全不同的文字!”; ｝ < div class = " pvw-title”>事实< / div >

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

很多人都说这是黑客。然而，我想添加更多最新的黑客，这利用了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，你可以很容易地将其扩展到移动设备。

你不能，嗯，你可以。

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

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

虽然你或多或少可以，但你不应该这样做。实际内容应写入文件。content属性主要用于小型标记，比如文本周围的引号应该被引用。

实现这一点的方法是在CSS内容中添加行高。这将使块显示在隐藏的上方，因此这将不会隐藏更改的文本。

之前使用的例子:

.pvw-title span {
  display: none;
}

.pvw-title:before {
  content: 'Whatever it is you want to add';
  line-height: 1.5em
}

八年后，当我试图使用Stylish浏览器扩展来更改一个网站(不是我的)上的某些内容时，我遇到了同样的挑战。这一次，我通过使用“inspect element”查看源代码，并基于此创建CSS代码，使其工作。

这是它以前的样子:

< table > < tbody > < tr > < td gridcell”角色= > <span标题=“在进展中”风格=“背景”右方:2px;text-align: center;width: 45px;显示:区块;超流:隐藏;文本overflow: ellipsis;“>进行中< /跨越> < / td > < / tr > < / tbody > - < table >

这是我用来修改样式的HTML和CSS的同一部分:

td span[style="background-color: #e2047a;color:White;margin:2px;border-radius:2px;padding-left: 2px; padding-right: 2px;text-align: center;width: 45px; display: block;overflow: hidden;text-overflow: ellipsis;"] { width: 100px!important; } <table> <tbody> <tr> <td role="gridcell"> <span title="In progress" style="background-color: #e2047a;color:White;margin:2px;border-radius:2px;padding-left: 2px; padding-right: 2px;text-align: center;width: 45px; display: block;overflow: hidden;text-overflow: ellipsis;">In progress</span> </td> </tr> </tbody> </table>

你可以运行上面的代码，你会看到它工作(在Chrome测试)。

这就是我当初问这个问题时想要的结果。

我使用一些社区博客/Myspace类似的东西，当你的个人资料的样式是他们的CSS编辑器时，你唯一拥有的东西，这就是为什么我想根据风格选择它。

我在这里找到了答案:

高级CSS选择器-根据样式选择 CSS选择器的内联样式属性