我如何用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 >
我得把"事实"替换掉。
当前回答
如果您只是想显示不同的文本或图像,请保持标记为空,并将内容写入多个数据属性,如<span data-text1="Hello" data-text2="Bye"></span>。 使用一个伪类显示它们:before {content: attr(data-text1)}
现在你有很多不同的方法在它们之间切换。我将它们与媒体查询结合使用,以实现响应式设计方法,将导航的名称更改为图标。
Jsfiddle演示和示例
它可能不能完美地回答这个问题,但它满足了我的需求,也许也满足了其他人的需求。
其他回答
我发现的最简单的方法是使元素font-size: 0px,然后在创建:后pseudo时用任何字体大小覆盖它。在下面的例子:
.pvw-title {
font-size:0px;
}
.pvw-title:after {
content: "Hello";
font-size:15px !important;
}
基于 mikemaccana的回答, 这对我很有效
按钮{ 位置:绝对的; 可见性:隐藏; } 按钮:{之前 内容:“再见”; 可见性:可见; } 原来<按钮> < / >按钮
§绝对定位
绝对定位的元素将从流中取出,从而 放置其他元素时不占用空间。
试着使用: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>
按钮的文本:
之前: 大screenxxx 大屏幕 后: xxxbig屏幕 大屏幕
你不能,嗯,你可以。
.pvw-title:after {
content: "Test";
}
这将在元素的当前内容之后插入内容。它实际上并不替换它,但您可以选择一个空的div,并使用CSS添加所有的内容。
虽然你或多或少可以,但你不应该这样做。实际内容应写入文件。content属性主要用于小型标记,比如文本周围的引号应该被引用。
实现这一点的方法是在CSS内容中添加行高。这将使块显示在隐藏的上方,因此这将不会隐藏更改的文本。
之前使用的例子:
.pvw-title span {
display: none;
}
.pvw-title:before {
content: 'Whatever it is you want to add';
line-height: 1.5em
}