如何使用以下方法将文本替换为CSS:
.pvw-title img[src*="IKON.img"] { visibility:hidden; }
代替( img[src*="IKON.img"]
),我需要使用可以代替文本的东西。
我必须使用[
]
它才能正常工作。
<div class="pvw-title">Facts</div>
我需要替换“ 事实 ”。
如何使用以下方法将文本替换为CSS:
.pvw-title img[src*="IKON.img"] { visibility:hidden; }
代替( img[src*="IKON.img"]
),我需要使用可以代替文本的东西。
我必须使用[
]
它才能正常工作。
<div class="pvw-title">Facts</div>
我需要替换“ 事实 ”。
Answers:
或者,您可以<span>
按如下方式包装“事实” :
<div class="pvw-title"><span>Facts</span></div>
然后使用:
.pvw-title span {
display: none;
}
.pvw-title:after {
content: 'whatever it is you want to add';
}
必须的:这是一种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;
}
注意:
visibility
。注意display: none
原始元素不起作用。display: none;
之所以不起作用,是因为::after
如果有人好奇,它的真正含义是“在元素内部,但最后”。
如果您愿意使用伪元素并让它们插入内容,则可以执行以下操作。它不假定您了解原始元素,并且不需要其他标记。
.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 */
}
<th>
元素内的文本节点。
line-height: 0
并color: transparent
在主元素和伪复位这些值做的工作(没有摆弄text-indent
)
line-height: normal
不是initial
?
这是简单,简短和有效的。无需其他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面包屑(而不是首页)的链接文本
body.woocommerce .woocommerce-breadcrumb > a[href$="/shop/"] {
color: transparent;
&:after {
content: "Store";
color: grey;
margin-left: -30px;
}
}
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:after {
content: "Test";
}
这将在之后插入内容在元素的当前。它实际上并不能替代它,但是您可以选择一个空的div,然后使用CSS添加所有内容。
但是,尽管您或多或少可以这样做,但您不应该这样做。实际内容应放在文档中。content属性主要用于小的标记,例如应该在引号旁显示的文字周围的引号。
尝试使用 :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>
按钮文字:
用 :before
大屏幕xxx
大屏幕
用 :after
xxx大萤幕
大屏幕
如果您只想显示不同的文本或图像,请将标记保留为空,然后将内容写入类似的多个数据属性中<span data-text1="Hello" data-text2="Bye"></span>
。用伪类之一显示它们:before {content: attr(data-text1)}
现在,您可以使用多种方法在它们之间进行切换。我将它们与媒体查询结合使用,以进行响应式设计,从而将导航名称更改为图标。
它可能无法完美回答问题,但它满足了我的需求,也许也满足了其他需求。
这对我来说适合内联文本。它已经在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;
}
我使用这个技巧:
.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!';
}
的HTML
<p class="replaced">Original Text</p>
的CSS
.replaced {
visibility: hidden;
position: relative;
}
.replaced:after {
visibility: visible;
position: absolute;
top: 0;
left: 0;
content: "This text replaces the original.";
}
这实现了一个复选框作为按钮,根据其“已选中”状态显示是或否。因此,它演示了一种使用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,因此应该可以在其他地方使用。
与我在其他每个答案中看到的不同,您无需使用伪元素即可将标签的内容替换为图像
<div class="pvw-title">Facts</div>
div.pvw-title { /* No :after or :before required */
content: url("your URL here");
}
content
仅适用于:before
和:after
。CSS3将其扩展到所有内容,但是Generated Content模块仍处于草稿状态,因此任何使用都极有可能取决于浏览器。
没有技巧,这实际上是不可能的。这是一种通过用文本图像替换文本的方法。
.pvw-title{
text-indent: -9999px;
background-image: url(text_image.png)
}
这种类型的事情通常是用JavaScript完成的。这是使用jQuery的方法:
$('.pvw-title').text('new text');
我遇到了必须替换链接文本的问题,但是我无法使用JavaScript,也无法直接更改超链接的文本,因为它是从XML编译下来的。另外,我不能使用伪元素,否则当我尝试使用伪元素时它们似乎不起作用。
基本上,我将想要的文本放入跨度中,并将锚标记置于其下方,并将二者都包裹在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将需要根据您的要求进行更改,但这是您所要执行的一般方法。
我找到了这样的解决方案,其中在较小的屏幕宽度上,将“ Dark”(短)字缩短为“ D”。基本上,您只需将原始内容的字体大小设为0,并将缩写形式作为伪元素即可。
在此示例中,更改发生在悬停时:
span {
font-size: 12px;
}
span:after {
display: none;
font-size: 12px;
content: 'D';
color: red;
}
span:hover {
font-size: 0px;
}
span:hover:after {
display: inline;
}
<span>Dark</span>
八年后,我在尝试使用“ 时尚”时遇到了同样的挑战浏览器扩展程序更改网站(不是我的网站)上的内容。这次我通过使用“检查元素”查看源代码来使其工作,并基于此创建了CSS代码。
这是以前的样子:
<table>
<tbody>
<tr>
<td role="gridcell">
<span title="In progress" style="background-color: #e2047a;color:White;margin:2px;border-radius:2px;padding-left: 2px; padding-right: 2px;text-align: center;width: 45px; display: block;overflow: hidden;text-overflow: ellipsis;">In progress</span>
</td>
</tr>
</tbody>
</table>
这是我用来修改样式的HTML和CSS的同一部分:
td span[style="background-color: #e2047a;color:White;margin:2px;border-radius:2px;padding-left: 2px; padding-right: 2px;text-align: center;width: 45px; display: block;overflow: hidden;text-overflow: ellipsis;"] {
width: 100px!important;
}
<table>
<tbody>
<tr>
<td role="gridcell">
<span title="In progress" style="background-color: #e2047a;color:White;margin:2px;border-radius:2px;padding-left: 2px; padding-right: 2px;text-align: center;width: 45px; display: block;overflow: hidden;text-overflow: ellipsis;">In progress</span>
</td>
</tr>
</tbody>
</table>
您可以运行上面的代码,然后您会看到它有效(已在Chrome中测试)。
这只是我问这个问题的时候想要的。
我在使用某种社区博客/ Myspace类似的东西,而样式设置个人资料时,您唯一拥有的就是他们的CSS编辑器,这就是为什么我想根据样式选择它的原因。
我在这里找到了答案:
好吧,正如许多人所说,这是黑客。但是,我想添加更多最新的hack,它利用flexbox
和的优势rem
,即
flexbox
padding
和/或margin
使用显式使用文本px
,这对于不同设备和浏览器上的不同屏幕尺寸可能会产生不同的输出简而言之,这就是解决方案,请flexbox
确保它能够自动完美定位,并且rem
是像素的更加标准化(和自动化)的替代方案。
CodeSandbox及其下面的代码以屏幕截图的形式输出,请阅读note
下面的代码!
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
您可以轻松地将其扩展到移动设备。