我如何用CSS替换文本使用这样的方法:

.pvw-title img[src*="IKON.img"] { visibility:hidden; }

而不是(img[src*="IKON. "img"]),我需要使用一些可以代替文本的东西。

我必须使用[]才能让它工作。

< div级= >事实“pvw-title < / div >

我得把"事实"替换掉。


当前回答

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

其他回答

你不能,嗯,你可以。

.pvw-title:after {
  content: "Test";
}

这将在元素的当前内容之后插入内容。它实际上并不替换它,但您可以选择一个空的div,并使用CSS添加所有的内容。

虽然你或多或少可以,但你不应该这样做。实际内容应写入文件。content属性主要用于小型标记,比如文本周围的引号应该被引用。

与我在其他每个答案中看到的不同,您不需要使用伪元素来将标记的内容替换为图像

<div class="pvw-title">Facts</div>

    div.pvw-title { /* No :after or :before required */
        content: url("your URL here");
    }

试着使用: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{
    text-indent: -9999px;
    background-image: url(text_image.png)
}

这类事情通常是用JavaScript完成的。下面是如何用jQuery完成的:

$('.pvw-title').text('new text');

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

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

§绝对定位

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