我如何用CSS替换文本使用这样的方法:
.pvw-title img[src*="IKON.img"] { visibility:hidden; }
而不是(img[src*="IKON. "img"])，我需要使用一些可以代替文本的东西。
我必须使用[]才能让它工作。
< div级= >事实“pvw-title < / div >
我得把"事实"替换掉。
当前回答
试着使用: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>
按钮的文本:
之前: 大screenxxx 大屏幕 后: xxxbig屏幕 大屏幕
其他回答
如果您愿意使用伪元素并让它们插入内容，您可以执行以下操作。它不假设原始元素的知识，也不需要额外的标记。
.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例子
如果您只是想显示不同的文本或图像，请保持标记为空，并将内容写入多个数据属性，如<span data-text1="Hello" data-text2="Bye"></span>。 使用一个伪类显示它们:before {content: attr(data-text1)}
现在你有很多不同的方法在它们之间切换。我将它们与媒体查询结合使用，以实现响应式设计方法，将导航的名称更改为图标。
Jsfiddle演示和示例
它可能不能完美地回答这个问题，但它满足了我的需求，也许也满足了其他人的需求。
我有一个问题，我必须替换链接的文本，但我不能使用JavaScript，也不能直接更改超链接的文本，因为它是从XML编译下来的。此外，我不能使用伪元素，或者当我尝试它们时，它们似乎不工作。
基本上，我把我想要的文本放到一个span中，把锚标签放在它下面，并在div中包装。我基本上通过CSS向上移动锚标签，然后使字体透明。现在，当您将鼠标悬停在跨度上时，它就像一个链接一样“起作用”。这是一种非常粗糙的方法，但这就是你如何使用不同文本的链接…
这是我是如何解决这个问题的
我的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将需要根据您的需求进行更改，但这是完成您要求的一般方法。
很多人都说这是黑客。然而，我想添加更多最新的黑客，这利用了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 {
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!';
}
