我如何用CSS替换文本使用这样的方法:
.pvw-title img[src*="IKON.img"] { visibility:hidden; }
而不是(img[src*="IKON. "img"])，我需要使用一些可以代替文本的东西。
我必须使用[]才能让它工作。
< div级= >事实“pvw-title < / div >
我得把"事实"替换掉。
当前回答
这简单、简短、有效。不需要额外的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;
}
其他回答
强制性:这是一个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无效。
我用了这个技巧:
.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!';
}
与我在其他每个答案中看到的不同，您不需要使用伪元素来将标记的内容替换为图像
<div class="pvw-title">Facts</div>
div.pvw-title { /* No :after or :before required */
content: url("your URL here");
}
这适用于我的内联文本。它在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;
}
或者你可以把'Facts'包在<span>上，如下所示:
.pvw-title span { 显示:没有; ｝ .pvw-title:{后 内容:“你想加什么就加什么”; ｝ < div class = " pvw-title " > < span >事实< / span > < / div >
