我如何用CSS替换文本使用这样的方法:
.pvw-title img[src*="IKON.img"] { visibility:hidden; }
而不是(img[src*="IKON. "img"]),我需要使用一些可以代替文本的东西。
我必须使用[]才能让它工作。
< div级= >事实“pvw-title < / div >
我得把"事实"替换掉。
我如何用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;
}
其他回答
这实现了一个复选框作为按钮,根据它的“checked”状态显示Yes或No。因此,它演示了一种使用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,所以它应该在其他地方工作。
这简单、简短、有效。不需要额外的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;
}
我用了这个技巧:
.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!';
}
我有一个问题,我必须替换链接的文本,但我不能使用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将需要根据您的需求进行更改,但这是完成您要求的一般方法。
如果您只是想显示不同的文本或图像,请保持标记为空,并将内容写入多个数据属性,如<span data-text1="Hello" data-text2="Bye"></span>。 使用一个伪类显示它们:before {content: attr(data-text1)}
现在你有很多不同的方法在它们之间切换。我将它们与媒体查询结合使用,以实现响应式设计方法,将导航的名称更改为图标。
Jsfiddle演示和示例
它可能不能完美地回答这个问题,但它满足了我的需求,也许也满足了其他人的需求。