changing text inside label element using CSS

Question

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.

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.

Answer 1

You can't change text with CSS. The exception to this rule is the ::before and ::after psuedo-elements. In theory you could use classes to toggle the text like so:

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?

Answer 2

Following the example at https://blog.escapecreative.com/how-to-replace-text-with-css/, this is what worked for me:

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';
}

Answer 3

You can only change the content of :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 support of pseudo elements. But that might not be problematic for your project.

Another thing to consider is that you'd have limited control over the toggle with CSS. Your two options are media queries and the familiar pseudo classes. If your toggling needs go beyond what those guys can do, you'd do best turning to Javascript.