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

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

（而不是（img[src*="IKON.img"]），我需要使用可以替换文本的东西。

我必须使用[ ]才能正常工作。

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

我需要替换“事实”。

评论

老实说，最好为此使用javascript。
使用Javascript需要加载DOM，因此有一个FOUC。我想这样做是用从查询字符串中提取的内容替换文本，同时避免了FOUC，而不必生成HTML服务器端（从而允许从CDN主动缓存和提供HTML）。
问题是如何使用CSS做到这一点。我使用的CMS仅允许更改CSS，这就是为什么我在谷歌搜索答案时到达此页面的原因，而不是其他原因。这就是为什么我们回答所提出的问题，而不是问问问问者情况为何没有不同的原因。

#1 楼

或者，您可以将“事实”包装在<span>周围，如下所示：



 .pvw-title span {
  display: none;
}
.pvw-title:after {
  content: 'whatever it is you want to add';
} 

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




评论

不错，但这是对HTML的更改，而不仅仅是CSS。

–mikemaccana
2013年1月10日15:58
有时这是您唯一的选择

–locrizak
2014年2月6日在20:49
跨度{display：none; }还应隐藏伪元素。您应该使用可见性：改为隐藏

–xryl669
2014年8月18日在6:16
显示：无；和可见性：隐藏；都隐藏伪元素

– Facondo Colombier
2015年2月23日14:20在
@Mathew隐藏了跨度，但将伪元素添加到div中，因此不应隐藏伪元素（通过使用可见性或display属性）

–露茶
2015年6月5日在17:19

#2 楼

强制性：这是一个hack：CSS并不是执行此操作的正确位置，但是在某些情况下-例如，您在iframe中拥有只能由CSS定制的第三方库-这种hack是唯一的选择。
您可以通过CSS替换文本。让我们使用CSS将带有单词“ hello”的绿色按钮替换为带有单词“再见”的红色按钮。
之前：

之后：

参见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'元素为内联
我们需要补偿通过调整伪元素的位置可以找到原始元素。
我们必须隐藏原始元素，并使用visibility显示伪元素。注意原始元素上的display: none不起作用。


评论

这不适用于IE 10，您知道如何对其进行修改吗？

–索尔米德
13年7月21日在3:02
显示：无；之所以不起作用，是因为:: after的真正含义是“在此元素内部，但最后”，以防万一有人好奇。

–Ry-♦
14年6月30日在22:17
不幸的是，“修改”按钮不再像按钮一样工作。这是一个很好的例子，只是它不适用于按钮。

–xryl669
14年8月18日在6:18
显示：无；和可见性：隐藏；都隐藏伪元素

– Facondo Colombier
2015年2月23日14:20在
确实，这种黑客攻击并不普遍。您必须考虑到生成的元素将保留原始元素的尺寸。因此，您的替换文字应具有相同的宽度/高度。

–venimus
2月13日上午11:23

#3 楼

如果您愿意使用伪元素并让它们插入内容，则可以执行以下操作。它不假定您了解原始元素，并且不需要其他标记。

.element {
  text-indent: -9999px;
  line-height: 0; /* Collapse the original line */
}

.element::after {
  content: "New text";
  text-indent: 0;
  display: block;
  line-height: initial; /* New content takes up original line height */
}


JSFiddle示例

评论

此答案在其他答案不多的地方起作用，例如元素内的文本节点。

–克里斯·克雷克斯（Chris Kerekes）
2014年4月8日在13:23
这很好。在我的情况下，行高度：0和颜色：在主元素上是透明的，并在伪元素上重置这些值即可完成工作（不会摆弄文字缩进）

– dontGoPlastic
2014年6月9日在21:38
它不应该是行高吗？是正常的，而不是初始的？

–本杰明
2014年11月27日15:10
使用text-indent的原因是，如果原始文本较长，则该元素将保留旧文本的大小，而不会缩小到新文本的大小（假设这就是您想要的）

–克里斯·詹森（Chris Janssen）
15年7月9日在20:34
文字缩进：-9999px；在IE上工作。可见度：隐藏；方法不适用于IE。

– Tom Stermitz
15年10月29日在16:10

#4 楼

根据
mikemaccana的回答，
这对我有用

 button {
  position: absolute;
  visibility: hidden;
}

button:before {
  content: "goodbye";
  visibility: visible;
}


§绝对定位


绝对定位的元素将从流程中删除，因此
放置其他元素时不占用空间。


评论

对我来说，这个答案优于其他答案，因为它可以在同一行中替换文本，也就是说，它不会强制换行（对于我的HTML和CSS特定组合）。

– pgr
15年5月23日在21:40

#5 楼

这是简单，简短和有效的。不需要其他HTML。

.pvw-title { color: transparent; }

.pvw-title:after {
        content: "New Text To Replace Old";
        color: black; /* set color to original text color */
        margin-left: -30px;
        /* margin-left equals length of text we're replacing */
    }


我必须这样做才能替换WooCommerce面包屑的链接文本（首页除外）


/无损


body.woocommerce .woocommerce-breadcrumb > a[href$="/shop/"] {
    color: transparent;
    &:after {
        content: "Store";
        color: grey;
        margin-left: -30px;
    }
}


CSS 

body.woocommerce .woocommerce-breadcrumb > a[href$="/shop/"] {
    color: transparent;
}

body.woocommerce .woocommerce-breadcrumb > a[href$="/shop/"]&:after {
    content: "Store";
    color: @child-color-grey;
    margin-left: -30px;
}


#6 楼

你不能，你可以。 

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


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

但是，尽管您可以或多或少可以，但您不应该这样做。实际内容应放在文档中。 content属性主要用于较小的标记，例如应在引号周围显示引号。

评论

我非常确定我使用了一种代码将文本替换为该方法。.'
事实
事实
'我不能使用：after，因为我有多个同名的div类：(

– MokiTa
2011-10-25 22:11


与浏览器的兼容性如何？我怀疑从长远来看，JavaScript将是这种灵活性的更好选择。

–先生
2013年8月2日23:29


现代浏览器支持它。我不确定较旧的IE版本，但我想可以在quirksmode.com上查找。 -edit-它可以：quirksmode.org/css/user-interface/content.html

– GolezTrol
2013年8月3日在16:34


#7 楼

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


按钮文字：



与:before

大屏幕xxx

大屏幕


与:after

xxx大屏幕

大屏幕



#8 楼

如果只想显示不同的文本或图像，请将标记保留为空，然后将内容写入<span data-text1="Hello" data-text2="Bye"></span>这样的多个数据属性中。
使用伪类:before {content: attr(data-text1)}之一显示它们，现在您可以有很多不同的方法可以在它们之间切换。我将它们与媒体查询结合使用，以进行响应式设计，从而将导航名称更改为图标。

jsfiddle演示和示例

它可能无法完美回答问题，但它满足了我的需求，也许也满足了其他需求。

#9 楼

我最好将外部元素的font-size: 0和font-size选择器的:after设置为所需的值。

评论

这很好。这是一个演示。

–亚瑟
18/12/28在14:38

#10 楼

具有伪元素和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.";
}


#11 楼

这对我来说适合内联文本。它已在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;
}


评论

至少在IE 9至11中对我不起作用，因为它忽略了：after元素上的“ visibility：visible”：stackoverflow.com/questions/17530947/…

–thenickdude
2014年6月20日下午0:14

#12 楼

我使用这个技巧：

.pvw-title {
    text-indent: -999px;
}
.pvw-title:after {
    text-indent: 0px;
    float: left;
    content: 'My New Content';
}


我什至通过更改基类就使用它来处理页面的国际化... 

.translate-es .welcome {
    text-indent: -999px;
}
.translate-es .welcome:after {
    text-indent: 0px;
    float: left;
    content: '¡Bienvenidos!';
}


评论

对于使用屏幕阅读器的用户来说，这是个问题。如果您不更改元素的显示/可见性并且不提供任何aria提示，则屏幕阅读器可能仍会读取您的“不可见”文本。

–杰出的编译器
16 Mar 8 '16 at 17:20

#13 楼

使用伪元素，此方法不需要了解原始元素，也不需要任何其他标记。

#someElement{
    color: transparent; /* You may need to change this color */
    position: relative;
}
#someElement:after { /* Or use :before if that tickles your fancy */
    content: "New text";
    color: initial;
    position: absolute;
    top: 0;
    left: 0;
}


#14 楼

这实现了一个复选框作为按钮，根据其“已选中”状态显示是或否。因此，它演示了一种使用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，因此应该可以在其他地方使用。

#15 楼

与我在其他每个答案中看到的不同，您无需使用伪元素即可将标签的内容替换为图像

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

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


评论

从CSS2开始，内容仅适用于：before和：after。 CSS3将其扩展到所有内容，但是Generated Content模块仍处于草稿状态，因此任何使用都极有可能取决于浏览器。

–mrec
17年8月7日在11:22
什么是“平衡”？我认为不是“ 1.（欧洲火车控制系统）电子信标或应答器放置在铁轨之间”。 （请通过编辑您的问题来答复，而不是在评论中）。

– Peter Mortensen
5月12日15:40


#16 楼

我遇到一个必须替换链接文本的问题，但是我无法使用JavaScript，也无法直接更改超链接的文本，因为它是从XML编译下来的。另外，我不能使用伪元素，或者当我尝试使用伪元素时它们似乎不起作用。

基本上，我将想要的文本放到一个范围中，并在其下方放置锚标记并包裹在一个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将需要根据您的要求进行更改，但是这是您要问的一般方法。

评论

@Almight为什么我怀疑这被否决了，因为此解决方案需要修改标记，并且我怀疑OP是否可以修改标记，他/她将直接更改文本。换句话说，OP需要仅CSS解决方案

– dannie.f
18年2月21日在18:24

#17 楼

我找到了这样的解决方案，其中在较小的屏幕宽度上，将“ Dark”（短）字缩短为“ D”。基本上，您只需将原始内容的字体大小设为0，并将缩写形式作为伪元素即可。

在此示例中，更改发生在悬停上，而不是：




 span {
  font-size: 12px;
}

span:after {
  display: none;
  font-size: 12px;
  content: 'D';
  color: red;
}

span:hover {
  font-size: 0px;
}

span:hover:after {
  display: inline;
} 

 <span>Dark</span>




#18 楼

八年后，当我尝试使用时尚的浏览器扩展程序更改网站（不是我的网站）上的内容时，我面临着同样的挑战。这次，我使用“检查元素”查看了源代码，并以此为基础创建了CSS代码。

它看起来像以前一样：




 <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>





这是我用来修改样式的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选择器属性


#19 楼

好吧，正如许多人所说，这是黑客。但是，我想添加更多最新的hack，它利用了flexbox和rem的优势，即


您不想手动将文本定位为已更改，这就是为什么要利用flexbox

的原因，您不想使用padding和/或margin显式地使用px来显示文本，这适用于不同设备上的不同屏幕尺寸和浏览器可能会提供不同的输出

这里是解决方案，简而言之，flexbox确保自动定位完美，并且rem是像素的更加标准化（和自动化）的替代选择。

CodeSandbox下面的代码并以屏幕截图的形式输出，请阅读下面的代码note！

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，您可以轻松地将其扩展到移动设备。



#20 楼

没有技巧，这实际上是不可能的。这是一种通过用文本图像替换文本的方法。

.pvw-title{
    text-indent: -9999px;
    background-image: url(text_image.png)
}


这种类型的事情通常是用JavaScript完成的。这是使用jQuery的方法：

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


评论

我也不能使用Javascript：/

– MokiTa
2011年10月25日在22:16
这是我认为可行的唯一方法：.pvw-title span [style * =“ color：＃000，font-size：14px;”] {可见性：隐藏； } .pvw-title span [style * =“ color：＃000; font-size：14px;”]：之后{能见度：可见；颜色：＃000; font-size：14px;内容：“测试”； }，但是，因为它们都使用相同的样式，所以我无法做到这一点..：/

– MokiTa
2011-10-25 22:20


为什么要根据颜色/字体选择它？

–内森·马努索斯（Nathan Manousos）
2011-10-25 22:22
我会根据整个样式来选择它，所以我可以编辑特定的标题，而不是两者，因为两者都具有相同的“ div”名称。

– MokiTa
2011-10-25 22:25

#21 楼

进行此工作的方法是将行高添加到CSS内容中。这将使该块在隐藏上方可见，因此不会隐藏更改后的文本。

在以下示例中使用的示例：

.pvw-title span {
  display: none;
}

.pvw-title:before {
  content: 'Whatever it is you want to add';
  line-height: 1.5em
}


#22 楼

示例
<!DOCTYPE html>
<html> 
<head> 
   <title>Devnote</title>
    <style>
        .replacedValue { 
            visibility: hidden; 
            position: relative; 
        } 
        .replacedValue:after { 
            visibility: visible; 
            position: absolute; 
            top: 0; 
            left: 0; 
            content: "Devnote is developer answer solve. devnote.in"; 
        } 
    </style> 
</head>
<body> 
    <p class="replacedValue">Old Text Here</p>
</body> 
</html>

输出
Devnote is developer answer solve. devnote.in