我如何用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 >
我得把"事实"替换掉。
当前回答
文本替换伪元素和CSS可见性
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内容中添加行高。这将使块显示在隐藏的上方,因此这将不会隐藏更改的文本。
之前使用的例子:
.pvw-title span {
display: none;
}
.pvw-title:before {
content: 'Whatever it is you want to add';
line-height: 1.5em
}
这简单、简短、有效。不需要额外的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;
}
我有一个问题,我必须替换链接的文本,但我不能使用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将需要根据您的需求进行更改,但这是完成您要求的一般方法。
你不能,嗯,你可以。
.pvw-title:after {
content: "Test";
}
这将在元素的当前内容之后插入内容。它实际上并不替换它,但您可以选择一个空的div,并使用CSS添加所有的内容。
虽然你或多或少可以,但你不应该这样做。实际内容应写入文件。content属性主要用于小型标记,比如文本周围的引号应该被引用。
如果没有技巧,这是不可能的。这里有一种通过用文本的图像替换文本的方法。
.pvw-title{
text-indent: -9999px;
background-image: url(text_image.png)
}
这类事情通常是用JavaScript完成的。下面是如何用jQuery完成的:
$('.pvw-title').text('new text');