我如何用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,你可以很容易地将其扩展到移动设备。

其他回答

基于 mikemaccana的回答, 这对我很有效

按钮{ 位置:绝对的; 可见性:隐藏; } 按钮:{之前 内容:“再见”; 可见性:可见; } 原来<按钮> < / >按钮

§绝对定位

绝对定位的元素将从流中取出,从而 放置其他元素时不占用空间。

我发现的最简单的方法是使元素font-size: 0px,然后在创建:后pseudo时用任何字体大小覆盖它。在下面的例子:

.pvw-title { 
    font-size:0px;
}

.pvw-title:after {
        content: "Hello";
        font-size:15px !important;
}

我比较幸运地将外部元素的font-size: 0和:after选择器的font-size设置为我需要的任何东西。

文本替换伪元素和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.";
}

为了在使用后隐藏原始内容,你可以使用这个hack:

.pvw-title { 字体大小:0; } .pvw-title:{后 字体大小:1快速眼动; 内容:“我是一段完全不同的文字!”; } < div class = " pvw-title”>事实< / div >

将font-size设置为0会使文本消失,而不会从视口中移除实际的元素。因此,:after选择器可以工作,并且应该在所有浏览器上显示。