我如何用CSS代替文字？
我如何使用像这样的方法replace文本与CSS：
.pvw-title img[src*="IKON.img"] { visibility:hidden; } 而不是（ img[src*="IKON.img"] ），我需要使用一些可以代替文本的东西。
我必须使用[ ]才能使其工作。
<div class="pvw-title">Facts</div>
我需要replace“事实”。
或者，也许你可以把“事实”包裹在一个<span> ，如下所示：
<div class="pvw-title"><span>Facts</span></div>
然后使用：
.pvw-title span { display: none; } .pvw-title:after { content: 'whatever it is you want to add'; }
强制性的 ：这是一个黑客：CSS不是正确的地方，但是如果在某些情况下 – 例如，在iframe中有一个只能由CSS定制的第三方库 – 这种黑客是唯一的选项。
您可以通过CSSreplace文字。 让我们用“hello”replace一个绿色的button，用一个红色的button说再见 ，使用CSS。 请参阅http://jsfiddle.net/ZBj2m/274/进行现场演示：;
这是我们的绿色button：
<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; }
注意：
- 我们明确地需要把这个标记为一个块元素，'之后'元素是默认的跨度
- 我们需要通过调整伪元素的位置来补偿原始元素。
- 我们必须隐藏原始元素并使用可见性显示伪元素。 注意显示：原始元素上没有任何内容似乎不起作用。
如果您愿意使用伪元素并让它们插入内容，则可以执行以下操作。 它不会假定原始元素的知识，也不需要额外的标记。
.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示例
基于mikemaccana的回答 ，这对我有效
button { position: absolute; visibility: hidden; } button:before { content: "goodbye"; visibility: visible; }
§绝对定位
完全放置的元素被从stream中取出，因此在放置其他元素时不占用空间。
简单，简短，有效。 没有额外的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面包屑
SASS / LESS
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; }
尝试使用：之前和之后。 一个在html呈现之后插入文本，另一个在html呈现之前插入。 如果要replace文字，请将button内容留空。
本示例根据屏幕宽度的大小设置button文本。
<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>
button文字：
1）与：之前
大屏幕xxx
大屏幕
2）与：之后
xxxbig屏幕
大屏幕
你不能，你可以。
.pvw-title:after { content: "Test"; }
这将在元素的当前内容之后插入内容。 它实际上并没有取代它，但你可以select一个空的div，并使用CSS来添加所有的内容。
但是，当你或多或less可以，你不应该。 实际内容应该放在文档中。 内容属性主要用于小标记，如引用文本周围的引号。
这在内联文本中适用于我。 经过FF，Safari，Chrome和Opera的testing
<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; }
我使用这个技巧：
.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!'; }
它可能不完全回答这个问题，但它满足了我的需要，也许也是其他人。
因此，如果您只想显示不同的文本或图像， 请将标记保留为空，并将您的内容写入多个数据属性中，如<span data-text1="Hello" data-text2="Bye"></span> 。 用伪类之一显示它们:before {content: attr(data-text1)}
现在你有很多不同的方法在它们之间切换。 我将它们与媒体查询结合使用，以实现响应式devise方法，将我的导航名称更改为图标。
jsfiddle演示和例子
我有更好的运气设置外部元素的font-size: 0 ，以及:afterselect器到我需要的任何font-size 。
这实现了一个checkbox作为一个button显示是或否取决于其“检查”状态。 所以它演示了使用CSS代替文本的一种方法，而不必编写任何代码。
就返回（或不返回）POST值而言，它的行为仍然像checkbox，但从显示的angular度来看，它看起来像一个切换button。
颜色可能不是你喜欢的，他们只是在那里来说明一个观点。
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，所以它应该在其他地方工作。
这是不可能的，没有技巧。 这是一种通过用文本图像replace文本的方式。
.pvw-title{ text-indent:-9999px; background-image:url(text_image.png) }
这种types的东西通常是用Javascript来完成的。 这里是如何使用jQuery完成的：
$('.pvw-title').text('new text');
使用伪元素，这种方法不需要知道原始元素，也不需要任何额外的标记。
#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; }
我有一个问题，我必须replace链接的文本，但不能使用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将需要根据您的要求进行更改，但这是您所要求的一般做法。
编辑：有人可以告诉我为什么这是downvoted？ 我的解决scheme…
与我在其他所有答案中看到的不同，您不需要使用伪元素来replace图像中的应答器的内容
事实
div.pvw-title { /* no :after or :before required*/ content: url("your url here"); }
