Html 使用 CSS 更改标签元素内的文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15214228/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
changing text inside label element using CSS
提问by CodeMonkey
I have a code snippet:
我有一个代码片段：
<fieldset class="shareMe"><br />
<input type="checkbox" id="share_me" name="share_me" value="1" {if $default_share_pref}checked="checked"{/if} onclick="if (this.checked) { var perms = 'publish_stream'; fb_login_cached(function(response){ if (!response.perms.match(new RegExp(perms))) $('share_me').checked = false; }, perms); }"/>
<label for="share_me">Post this question to my friends on
<span class="">
<a class="fb_button fb_button_small">
<span class="fb_button_text">Facebook</span>
</a>
</span>.
</label>
</fieldset>
I want to change the text in <label for .. >field via CSS.
我想<label for .. >通过 CSS更改字段中的文本。
I know i can do it by placing duplicate copy of this snippet and use css to toggle. However, i want to do it minimum code change. May be using some CSS trick to change <label for..>text and not affecting the code inside <label for...>at all.
我知道我可以通过放置此代码段的重复副本并使用 css 进行切换来实现。但是，我想做最少的代码更改。可能正在使用一些 CSS 技巧来更改<label for..>文本，而根本不影响内部代码<label for...>。
采纳答案by Niet the Dark Absol
You can't change text with CSS. The exception to this rule is the ::beforeand ::afterpsuedo-elements. In theory you could use classes to toggle the text like so:
您无法使用 CSS 更改文本。此规则的例外是::before和::after伪元素。理论上，您可以使用类来切换文本，如下所示：
label[for="share_me"]:before{content:'Post this question to my friends on '}
label[for="share_me"].othertext:before{content:'Some other text!'}
However, just because you can doesn't mean you should. It's an accessibility nightmare, and can you imagine coming back later and trying to work out where the text is coming from if not from the HTML?
然而，仅仅因为你可以并不意味着你应该。这是一个可访问性的噩梦，你能想象稍后回来并试图找出文本的来源，如果不是来自 HTML 吗？
回答by jamesplease
You can only change the contentof :before and :after pseudoelements with CSS. Ali Bassam's answer below shows a 'hacky' way to display the pseudoelements content over the parent so that you can control it. Problems with this solution include, well, how hacky it seems and also the limited IE supportof pseudo elements. But that might not be problematic for your project.
您只能使用 CSS更改:before 和 :after 伪元素的内容。下面 Ali Bassam 的回答显示了一种在父元素上显示伪元素内容的“hacky”方式，以便您可以控制它。这个解决方案的问题包括它看起来有多么笨拙，以及对伪元素的IE 支持有限。但这对您的项目来说可能不是问题。
Another thing to consider is that you'd have limited control over the toggle with CSS. Your two options are media queriesand the familiar pseudo classes. If your toggling needs go beyond what those guys can do, you'd do best turning to Javascript.
另一件要考虑的事情是，您对 CSS 切换的控制有限。您的两个选项是媒体查询和熟悉的伪类。如果您的切换需求超出了那些人的能力，您最好转向 Javascript。
回答by Jaime Montoya
Following the example at https://blog.escapecreative.com/how-to-replace-text-with-css/, this is what worked for me:
按照https://blog.escapecreative.com/how-to-replace-text-with-css/ 上的示例，这对我有用：
label[for="donate-choice-14724"]{
visibility: hidden;
position: relative;
}
label[for="donate-choice-14724"]:after{
visibility: visible;
position: absolute;
top: 0;
left: 0;
content:'Make this donation monthly';
}
