我如何用CSS替换文本?

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

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

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

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

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

我得把"事实"替换掉。

当前回答

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

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

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

2021-06-29 22:42:11

其他回答

这实现了一个复选框作为按钮，根据它的“checked”状态显示Yes或No。因此，它演示了一种使用CSS替换文本的方法，而无需编写任何代码。

在返回(或不返回)POST值时，它仍然表现得像一个复选框，但从显示的角度来看，它看起来像一个切换按钮。

这些颜色可能不是你喜欢的，它们只是为了说明一个观点。

HTML是:

<input type="checkbox" class="yesno" id="testcb" /><label for="testcb"><span></span></label>

.．.CSS为:

/* --------------------------------- */
/* Make the checkbox non-displayable */
/* --------------------------------- */
input[type="checkbox"].yesno {
    display:none;
}
/* --------------------------------- */
/* Set the associated label <span>   */
/* the way you want it to look.      */
/* --------------------------------- */
input[type="checkbox"].yesno+label span {
    display:inline-block;
    width:80px;
    height:30px;
    text-align:center;
    vertical-align:middle;
    color:#800000;
    background-color:white;
    border-style:solid;
    border-width:1px;
    border-color:black;
    cursor:pointer;
}
/* --------------------------------- */
/* By default the content after the  */
/* the label <span> is "No"          */
/* --------------------------------- */
input[type="checkbox"].yesno+label span:after {
    content:"No";
}
/* --------------------------------- */
/* When the box is checked the       */
/* content after the label <span>    */
/* is "Yes" (which replaces any      */
/* existing content).                */
/* When the box becomes unchecked the*/
/* content reverts to the way it was.*/
/* --------------------------------- */
input[type="checkbox"].yesno:checked+label span:after {
    content:"Yes";
}
/* --------------------------------- */
/* When the box is checked the       */
/* label <span> looks like this      */
/* (which replaces any existing)     */
/* When the box becomes unchecked the*/
/* layout reverts to the way it was. */
/* --------------------------------- */
input[type="checkbox"].yesno:checked+label span {
    color:green;
    background-color:#C8C8C8;
}

我只在Firefox上尝试过，但它是标准的CSS，所以它应该在其他地方工作。

2015-11-12 15:05:34

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

你不能，嗯，你可以。

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

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

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

2011-10-25 22:02:58

我有一个问题，我必须替换链接的文本，但我不能使用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

八年后，当我试图使用Stylish浏览器扩展来更改一个网站(不是我的)上的某些内容时，我遇到了同样的挑战。这一次，我通过使用“inspect element”查看源代码，并基于此创建CSS代码，使其工作。

这是它以前的样子:

< table > < tbody > < tr > < td gridcell”角色= > <span标题=“在进展中”风格=“背景”右方:2px;text-align: center;width: 45px;显示:区块;超流:隐藏;文本overflow: ellipsis;“>进行中< /跨越> < / td > < / tr > < / tbody > - < table >

这是我用来修改样式的HTML和CSS的同一部分:

td span[style="background-color: #e2047a;color:White;margin:2px;border-radius:2px;padding-left: 2px; padding-right: 2px;text-align: center;width: 45px; display: block;overflow: hidden;text-overflow: ellipsis;"] { width: 100px!important; } <table> <tbody> <tr> <td role="gridcell"> <span title="In progress" style="background-color: #e2047a;color:White;margin:2px;border-radius:2px;padding-left: 2px; padding-right: 2px;text-align: center;width: 45px; display: block;overflow: hidden;text-overflow: ellipsis;">In progress</span> </td> </tr> </tbody> </table>

你可以运行上面的代码，你会看到它工作(在Chrome测试)。

这就是我当初问这个问题时想要的结果。

我使用一些社区博客/Myspace类似的东西，当你的个人资料的样式是他们的CSS编辑器时，你唯一拥有的东西，这就是为什么我想根据风格选择它。

我在这里找到了答案:

高级CSS选择器-根据样式选择 CSS选择器的内联样式属性

2020-01-02 11:26:22

我如何用CSS替换文本?

推荐文章

最新文章

标签