我如何用CSS替换文本使用这样的方法:
.pvw-title img[src*="IKON.img"] { visibility:hidden; }
而不是(img[src*="IKON. "img"])，我需要使用一些可以代替文本的东西。
我必须使用[]才能让它工作。
< div级= >事实“pvw-title < / div >
我得把"事实"替换掉。
当前回答
这适用于我的内联文本。它在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;
}
其他回答
试着使用: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屏幕 大屏幕
我找到了一个这样的解决方案，在较小的屏幕宽度上，一个单词“Dark”将被缩短为“D”。基本上，您只需使原始内容的字体大小为0，并将缩短的形式作为伪元素。
在这个例子中，改变发生在hover上:
跨度{ 字体大小:12 px; ｝ 跨度:{后 显示:没有; 字体大小:12 px; 内容:' D '; 颜色:红色; ｝ 跨度:{徘徊 字体大小:0 px; ｝ 跨度:徘徊:{后 显示:内联; ｝ 黑暗< span > < / span >
基于 mikemaccana的回答, 这对我很有效
按钮{ 位置:绝对的; 可见性:隐藏; ｝ 按钮:{之前 内容:“再见”; 可见性:可见; ｝ 原来<按钮> < / >按钮
§绝对定位
绝对定位的元素将从流中取出，从而 放置其他元素时不占用空间。
你不能，嗯，你可以。
.pvw-title:after {
content: "Test";
}
这将在元素的当前内容之后插入内容。它实际上并不替换它，但您可以选择一个空的div，并使用CSS添加所有的内容。
虽然你或多或少可以，但你不应该这样做。实际内容应写入文件。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;
}
