如何使用这样的方法用 CSS 替换文本：
.pvw-title img[src*="IKON.img"] { visibility:hidden; }
而不是（ img[src*="IKON.img"] ），我需要使用可以替换文本的东西。
我必须使用 [ ] 才能让它工作。
<div class="pvw-title">Facts</div>
我需要替换“事实”。
或者，也许您可以将“Facts”包裹在 <span> 周围，如下所示：
.pvw-标题跨度{显示：无； } .pvw-title:after { content: '无论你想添加什么'; }
强制性：这是一个 hack：CSS 不是执行此操作的正确位置，但在某些情况下 - 例如，您在 iframe 中有一个只能由 CSS 自定义的第三方库 - 这种 hack 是唯一的选择.
您可以通过 CSS 替换文本。让我们使用 CSS 将带有单词“hello”的绿色按钮替换为带有单词“goodbye”的红色按钮。
前：
https://i.stack.imgur.com/VGS41.png
后：
https://i.stack.imgur.com/dD170.png
有关现场演示，请参见 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' 元素默认是内联的
我们需要通过调整伪元素的位置来补偿原始元素。
我们必须隐藏原始元素并使用可见性显示伪元素。注意 display: none 在原始元素上不起作用。
display: none; 不起作用，因为 ::after 真正的意思是“在这个元素内，但在最后”，以防有人好奇。
如果您愿意使用伪元素并让它们插入内容，您可以执行以下操作。它不假设原始元素的知识，也不需要额外的标记。
.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 */
}
<th> 元素内的文本节点。
line-height: 0 和 color: transparent 并在伪上重置这些值可以完成这项工作（不要摆弄 text-indent）
line-height: normal 而不是 initial 吗？
基于 mikemaccana’s answer，这对我有用
按钮{位置：绝对；可见性：隐藏； } 按钮：之前 { 内容：“再见”；能见度：可见； }
绝对定位的元素从流中取出，因此在放置其他元素时不占用空间。
这是简单、简短和有效的。不需要额外的 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 面包屑的链接文本，而不是主页
萨斯/少
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;
}
你不能，好吧，你可以。
.pvw-title:after {
content: "Test";
}
这将在元素的当前内容之后插入内容。它实际上并没有替换它，但您可以选择一个空 div，并使用 CSS 添加所有内容。
但是，尽管您或多或少可以，但您不应该。实际内容应放在文档中。 content 属性主要用于小标记，例如应该被引用的文本周围的引号。
尝试使用 :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>
按钮文字：
用:before big screenxxx big screen 用:after xxxbig screen big screen
为了在原始内容之后使用并隐藏原始内容，您可以使用此 hack：
.pvw-title { 字体大小：0； } .pvw-title:after { font-size: 1rem; content: '我是完全不同的一段文字！'; }
将 font-size 设置为 0 会使文本消失，而不会从视口中移除实际元素。因此，:after 选择器有效并且应该在所有浏览器上显示。
我最好将外部元素的 font-size: 0 和 :after 选择器的 font-size 设置为我需要的任何内容。
如果您只想显示不同的文本或图像，将标签保留为空，并将您的内容写入多个数据属性，如 <span data-text1="Hello" data-text2="Bye"></span>。用其中一个伪类 :before {content: attr(data-text1)} 显示它们
现在你有很多不同的方法可以在它们之间切换。我将它们与媒体查询结合使用，以采用响应式设计方法将导航名称更改为图标。
jsfiddle demonstration and examples
它可能不能完美地回答这个问题，但它满足了我的需求，也许也满足了其他人的需求。
这对我来说适用于内联文本。它在 Firefox、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;
}
使用伪元素和 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.";
}
我发现最简单的方法是制作元素 font-size: 0px，然后在创建 :after 伪时用任何字体大小覆盖它。下面的例子：
.pvw-title {
font-size:0px;
}
.pvw-title:after {
content: "Hello";
font-size:15px !important;
}
我使用这个技巧：
.pvw-title {
text-indent: -999px;
}
.pvw-title:after {
text-indent: 0px;
float: left;
content: 'My New Content';
}
我什至通过更改基类来使用它来处理页面的国际化......
.translate-es .welcome {
text-indent: -999px;
}
.translate-es .welcome:after {
text-indent: 0px;
float: left;
content: '¡Bienvenidos!';
}
试试这个方法：
IDENTIFIER {
visibility: hidden;
position: relative;
}
IDENTIFIER::after {
visibility: visible;
position: absolute;
top: 0;
left: 0;
content: "NEW_CONTENT";
}
使用伪元素，这种方法不需要原始元素的知识，也不需要任何额外的标记。
#someElement{
color: transparent; /* You may need to change this color */
position: relative;
}
#someElement:after { /* Or use :before if that tickles your fancy */
content: "New text";
color: initial;
position: absolute;
top: 0;
left: 0;
}
这将复选框实现为按钮，根据其“已检查”状态显示是或否。因此，它演示了一种使用 CSS 替换文本而无需编写任何代码的方法。
就返回（或不返回）一个 POST 值而言，它的行为仍然像一个复选框，但从显示的角度来看，它看起来像一个切换按钮。
颜色可能不是你喜欢的，它们只是为了说明一个观点。
HTML 是：
<input type="checkbox" class="yesno" id="testcb" /><label for="testcb"><span></span></label>
...而 CSS 是：
/* --------------------------------- */
/* Make the checkbox non-displayable */
/* --------------------------------- */
input[type="checkbox"].yesno {
display:none;
}
/* --------------------------------- */
/* Set the associated label <span> */
/* the way you want it to look. */
/* --------------------------------- */
input[type="checkbox"].yesno+label span {
display:inline-block;
width:80px;
height:30px;
text-align:center;
vertical-align:middle;
color:#800000;
background-color:white;
border-style:solid;
border-width:1px;
border-color:black;
cursor:pointer;
}
/* --------------------------------- */
/* By default the content after the */
/* the label <span> is "No" */
/* --------------------------------- */
input[type="checkbox"].yesno+label span:after {
content:"No";
}
/* --------------------------------- */
/* When the box is checked the */
/* content after the label <span> */
/* is "Yes" (which replaces any */
/* existing content). */
/* When the box becomes unchecked the*/
/* content reverts to the way it was.*/
/* --------------------------------- */
input[type="checkbox"].yesno:checked+label span:after {
content:"Yes";
}
/* --------------------------------- */
/* When the box is checked the */
/* label <span> looks like this */
/* (which replaces any existing) */
/* When the box becomes unchecked the*/
/* layout reverts to the way it was. */
/* --------------------------------- */
input[type="checkbox"].yesno:checked+label span {
color:green;
background-color:#C8C8C8;
}
我只在 Firefox 上试过，但它是标准的 CSS，所以它应该可以在其他地方工作。
我遇到了一个问题，我必须替换链接的文本，但我不能使用 JavaScript，也不能直接更改超链接的文本，因为它是从 XML 编译下来的。另外，我不能使用伪元素，或者当我尝试它们时它们似乎不起作用。
基本上，我将我想要的文本放入一个跨度中，并将锚标记放在它下面，并将它们都包裹在一个 div 中。我基本上通过 CSS 将锚标记向上移动，然后使字体透明。现在，当您将鼠标悬停在跨度上时，它就像链接一样“起作用”。这样做的一种非常hacky的方式，但这就是您可以使用不同文本链接的方式...
This is a fiddle of how I got around this issue
我的 HTML
<div class="field">
<span>This is your link text</span><br/>
<a href="//www.google.com" target="_blank">This is your actual link</a>
</div>
我的 CSS
div.field a {
color: transparent;
position: absolute;
top:1%;
}
div.field span {
display: inline-block;
}
CSS 将需要根据您的要求进行更改，但这是执行您所要求的一般方式。
我找到了一个这样的解决方案，在较小的屏幕宽度上，单词“Dark”将缩短为“D”。基本上，您只需将原始内容的字体大小设为 0，并将缩短的形式作为伪元素。
在此示例中，更改发生在悬停时：
跨度{字体大小：12px； } 跨度：之后 { 显示：无；字体大小：12px；内容：'D'；红色; }跨度：悬停{字体大小：0px； } span:hover:after { display: inline; } 黑暗
八年后，当我尝试使用 Stylish 浏览器扩展来更改网站上的某些内容（不是我的）时，我遇到了同样的挑战。而这一次，我通过使用“检查元素”查看源代码并在此基础上创建 CSS 代码来使其工作。
这是它之前的样子：
这是我用来修改样式的同一段 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;显示：块；溢出：隐藏；文本溢出：省略号；"] {宽度：100px！重要； }
你可以运行上面的代码，你会看到它可以工作（在 Chrome 中测试）。
这就是我在问这个问题的时候想要的。
我在使用某种社区博客/Myspace 类似的东西，而您在为个人资料设置样式时唯一拥有的就是他们的 CSS 编辑器，这就是我想根据样式选择它的原因。
我在这里找到了答案：
高级 CSS 选择器 - 基于样式选择
内联样式属性的 CSS 选择器
与我在其他每个答案中看到的不同，您不需要使用伪元素来用图像替换标签的内容
<div class="pvw-title">Facts</div>
div.pvw-title { /* No :after or :before required */
content: url("your URL here");
}
content 仅适用于 :before 和 :after。 CSS3 将其扩展到所有内容，但 Generated Content 模块仍处于草稿状态，因此任何使用都高度可能依赖于浏览器。
好吧，正如许多人所说，这是一个黑客行为。但是，我想添加更多最新的 hack，它利用了 flexbox 和 rem，即
您不想手动定位要更改的文本，这就是您想利用 flexbox 的原因
您不想使用 px 显式使用文本的填充和/或边距，这对于不同设备和浏览器上的不同屏幕尺寸可能会产生不同的输出
这是解决方案，简而言之，flexbox 确保它自动完美定位，rem 是像素的更标准化（和自动化）替代方案。
CodeSandbox 带有下面的代码并以屏幕截图的形式输出，请阅读代码下方的 note！
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，您可以轻松地将其扩展到移动设备。
https://i.stack.imgur.com/UMrqc.png
例子
<!DOCTYPE html>
<html>
<head>
<title>Devnote</title>
<style>
.replacedValue {
visibility: hidden;
position: relative;
}
.replacedValue:after {
visibility: visible;
position: absolute;
top: 0;
left: 0;
content: "Devnote is developer answer solve. devnote.in";
}
</style>
</head>
<body>
<p class="replacedValue">Old Text Here</p>
</body>
</html>
输出
Devnote is developer answer solve. devnote.in
没有技巧，这实际上是不可能的。这是一种通过将文本替换为文本图像的方法。
.pvw-title{
text-indent: -9999px;
background-image: url(text_image.png)
}
这种类型的事情通常是用 JavaScript 完成的。这是使用 jQuery 完成的方法：
$('.pvw-title').text('new text');
完成这项工作的方法是在 CSS 内容中添加 line-height。这将使块在隐藏的上方可见，因此这不会隐藏更改的文本。
之前使用的示例：
.pvw-title span {
display: none;
}
.pvw-title:before {
content: 'Whatever it is you want to add';
line-height: 1.5em
}
关注公众号
不定期副业成功案例分享
想领先一步获取最新的外包任务吗？
立即订阅
HuntsBot(狩猎机器人)，一站式外包任务、远程工作、产品创意分享与订阅平台，支持钉钉、飞书、企业微信、邮箱、Telegram机器人订阅。平台会以及时、稳定、可靠的技术把外包任务需求、远程工作机会、产品创意等推送给每一位订阅的用户。