Mok*_*iTa 286 css text replace
如何使用如下方法用css替换文本:
.pvw-title img[src*="IKON.img"] { visibility:hidden; }
而不是( img[src*="IKON.img"] ),我需要使用可以替换文本的东西.
我必须用[ ]它才能让它发挥作用.
<div class="pvw-title">Facts</div>
我需要更换"事实".
Mat*_*hia 256
或者也许您可以将"事实"包装<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';
}
mik*_*ana 219
强制性:这是一个黑客攻击:CSS不适合这样做,但在某些情况下 - 例如,你在iframe中有一个只能通过CSS自定义的第三方库 - 这种黑客攻击是唯一的选择.
您可以通过CSS替换文本.让我们用'hello'替换一个带有红色按钮的绿色按钮,该按钮表示'再见',使用CSS.有关现场演示,请参见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关于原始元素的注意不起作用.Jam*_*yke 150
如果您愿意使用伪元素并让它们插入内容,您可以执行以下操作.它不会假设原始元素的知识,也不需要额外的标记.
.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 */
}
小智 52
根据 mikemaccana的回答,这对我有用
button {
position: absolute;
visibility: hidden;
}
button:before {
content: "goodbye";
visibility: visible;
}
绝对定位的元素从流中取出,因此在放置其他元素时不占用空间.
Tha*_*guy 35
为了使用后并隐藏原始内容，您可以使用以下技巧：
.pvw-title {
font-size: 0;
}
.pvw-title:after {
font-size: 1rem;
content: 'I am a totally different piece of text!';
}<div class="pvw-title">Facts</div>设置font-size为 0 会使文本消失，而不从视口中删除实际元素。因此，:after选择器可以工作并且应该在所有浏览器上显示。
haw*_*126 29
简单,简短,有效.不需要额外的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/LESS
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;
}
Gol*_*rol 20
你不能,嗯,你可以.
.pvw-title:after {
content: "Test";
}
这将在元素的当前内容之后插入内容.它实际上并不替换它,但您可以选择空div,并使用CSS添加所有内容.
但是,当你或多或少可以,你不应该.实际内容应放在文件中.content属性主要用于小标记,例如应该出现引用的文本周围的引号.
liv*_*ove 13
尝试使用: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>
按钮文字:
1)用:之前
大屏幕xxx
大屏幕
2)用:之后
xxxbig屏幕
大屏幕
Rob*_*ene 11
它可能无法完美地回答这个问题,但它也满足了我的需求,也许也满足了其他人
因此,如果您只想显示不同的文本或图像,请将标记保持为空,并将内容写入多个数据属性中<span data-text1="Hello" data-text2="Bye"></span>.使用其中一个伪类显示它们:before {content: attr(data-text1)}
现在,您有许多不同的方法可以在它们之间切换.我将它们与媒体查询结合使用,以获得响应式设计方法,将导航名称更改为图标.
Mur*_*ARI 11
试试这个方法：
IDENTIFIER {
visibility: hidden;
position: relative;
}
IDENTIFIER::after {
visibility: visible;
position: absolute;
top: 0;
left: 0;
content: "NEW_CONTENT";
}
小智 9
这对我来说是内联文本.经过FF,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;
}
我发现的最简单的方法是制作 element font-size: 0px，然后在创建:after伪时用任何字体大小覆盖它。下面的例子：
.pvw-title {
font-size:0px;
}
.pvw-title:after {
content: "Hello";
font-size:15px !important;
}
小智 8
我用这个技巧:
.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!';
}
用伪元素替换文本和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.";
}
| 归档时间： |
|
| 查看次数： |
696648 次 |
| 最近记录： |