CSS

Question

を使用してlabel要素内のテキストを変更し、私はコードスニペットがあります

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

を私はCSSを経由して<label for .. >フィールドのテキストを変更したいです。

私はこのスニペットの複製コピーを置き、cssを使用してトグルできることを知っています。しかし、私はそれを最小限のコード変更をしたい。 <label for..>のテキストを変更し、<label for...>内のコードには何の影響も与えないCSSトリックを使用している可能性があります。

Answer 1

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

しかし、という理由だけで。それはアクセシビリティの悪夢で、後で戻って来て、HTMLから来ていないテキストがどこから来ているのか想像してもらえますか？

Answer 2

only change the contentの：beforeと：after CSS付きの擬似要素です。下のAli Bassamの答えは、あなたがそれを制御できるように、親に擬似要素のコンテンツを表示するための「ハッピーな」方法を示しています。この解決策の問題には、いかにしてハッキーなのか、擬似要素のthe limited IE supportなどがあります。しかし、それはあなたのプロジェクトにとって問題ではないかもしれません。

もう1つ考慮すべきことは、CSSを使用してトグルを制御することが制限されていることです。あなたの2つのオプションは、media queriesとおなじみのpseudo classesです。あなたのトグルする必要がそれらの人ができることを超えて行くなら、あなたは最高のことをするでしょうturning to Javascript.