我如何用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 >
我得把"事实"替换掉。
当前回答
很多人都说这是黑客。然而,我想添加更多最新的黑客,这利用了flexbox和rem的优势,即。
您不希望手动定位要更改的文本,这就是为什么您希望利用flexbox 您不希望显式地使用px对文本使用填充和/或边距,这对于不同设备和浏览器上的不同屏幕大小可能会给出不同的输出
这里是解决方案,简而言之,flexbox确保它自动定位完美,rem是更标准化(和自动化)的像素替代方案。
codeandbox带有下面的代码,并以截图的形式输出,请务必阅读下面的代码说明!
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,你可以很容易地将其扩展到移动设备。
其他回答
文本替换伪元素和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.";
}
我有一个问题,我必须替换链接的文本,但我不能使用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将需要根据您的需求进行更改,但这是完成您要求的一般方法。
我比较幸运地将外部元素的font-size: 0和:after选择器的font-size设置为我需要的任何东西。
这适用于我的内联文本。它在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;
}
实现这一点的方法是在CSS内容中添加行高。这将使块显示在隐藏的上方,因此这将不会隐藏更改的文本。
之前使用的例子:
.pvw-title span {
display: none;
}
.pvw-title:before {
content: 'Whatever it is you want to add';
line-height: 1.5em
}