我如何用CSS替换文本?

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

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

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

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

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

我得把"事实"替换掉。

当前回答

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

2017-03-03 16:34:18

其他回答

试着使用: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屏幕大屏幕

2016-09-12 17:14:45

我有一个问题，我必须替换链接的文本，但我不能使用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将需要根据您的需求进行更改，但这是完成您要求的一般方法。

2015-03-21 20:48:26

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

2018-08-16 00:25:31

试试这个方法:

IDENTIFIER {
    visibility: hidden;
    position: relative;
}
IDENTIFIER::after {
    visibility: visible;
    position: absolute;
    top: 0;
    left: 0;
    content: "NEW_CONTENT";
}

2021-08-31 01:45:59

强制性:这是一个hack: CSS不是做这件事的正确地方，但在某些情况下——例如，你在iframe中有一个只能由CSS定制的第三方库——这种hack是唯一的选择。

您可以通过CSS替换文本。让我们用CSS将一个带有单词“hello”的绿色按钮替换为一个带有单词“goodbye”的红色按钮。

之前:

后:

现场演示见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;
}

注意:

我们需要显式地将其标记为块元素，'after'元素默认为内联元素我们需要通过调整伪元素的位置来补偿原始元素。我们必须隐藏原始元素，并使用可见性显示伪元素。注意显示:原始元素上的none无效。

2013-01-10 15:55:44

我如何用CSS替换文本?

推荐文章

最新文章

标签