title: changing text inside label element using CSS
body: <p>I have a code snippet:</p>
  
  <pre><code>&lt;fieldset class="shareMe"&gt;&lt;br /&gt;
      &lt;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); }"/&gt;
     &lt;label for="share_me"&gt;Post this question to my friends on 
        &lt;span class=""&gt;
           &lt;a class="fb_button fb_button_small"&gt;
              &lt;span class="fb_button_text"&gt;Facebook&lt;/span&gt;
           &lt;/a&gt;
        &lt;/span&gt;.
     &lt;/label&gt;
  &lt;/fieldset&gt;
  </code></pre>
  
  <p>I want to change the text in <code>&lt;label for .. &gt;</code> field via CSS. </p>
  
  <p>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 <code>&lt;label for..&gt;</code> text and not affecting the code inside <code>&lt;label for...&gt;</code> at all. </p>