我如何用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 >
我得把"事实"替换掉。
当前回答
这实现了一个复选框作为按钮,根据它的“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,所以它应该在其他地方工作。
其他回答
基于 mikemaccana的回答, 这对我很有效
按钮{ 位置:绝对的; 可见性:隐藏; } 按钮:{之前 内容:“再见”; 可见性:可见; } 原来<按钮> < / >按钮
§绝对定位
绝对定位的元素将从流中取出,从而 放置其他元素时不占用空间。
你不能,嗯,你可以。
.pvw-title:after {
content: "Test";
}
这将在元素的当前内容之后插入内容。它实际上并不替换它,但您可以选择一个空的div,并使用CSS添加所有的内容。
虽然你或多或少可以,但你不应该这样做。实际内容应写入文件。content属性主要用于小型标记,比如文本周围的引号应该被引用。
这简单、简短、有效。不需要额外的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无效。
我找到了一个这样的解决方案,在较小的屏幕宽度上,一个单词“Dark”将被缩短为“D”。基本上,您只需使原始内容的字体大小为0,并将缩短的形式作为伪元素。
在这个例子中,改变发生在hover上:
跨度{ 字体大小:12 px; } 跨度:{后 显示:没有; 字体大小:12 px; 内容:' D '; 颜色:红色; } 跨度:{徘徊 字体大小:0 px; } 跨度:徘徊:{后 显示:内联; } 黑暗< span > < / span >