要素を非表示にしますが、CSSで生成されたコンテンツを表示します

Question

要素のコンテンツを隠す方法はありますか？:beforeコンテンツを表示したままにしますか？ は、私は次のコードを持って言う：

HTML：

<span class="addbefore hidetext">You are here</span> 

CSS：私が試した

.addbefore:before { 
    content: "Show this"; 
} 
.hidetext { 
    // What do I do here to hide the content without hiding the :before content? 
} 

：

• がdisplay: noneを使用して:beforeにdisplay: inlineを設定することが、両方ともまだ隠されている
を使用して
• ;が、その後、追加のスペースが追加されるようです
• 色使用して：透明を;,が、その後、もちろん、スパンの内容はまだtext-indent: -....pxを使用して
• スペースをとりますが、
  （？）
  1. これは、検索エンジンによって眉をひそめていると
  2. スパン要素のために働くことはないようだ（？）

他のアイデアをとどのように私はこれを行うかもしれませんか？

Answer 1

ソリューションのクリーン

あなたはvisibility: hiddenを使用することができますが、この溶液を用いて、隠されたコンテンツがまだスペースを取り上げるのサンプルコードは、この可能性があります。これはあなたには関係しない場合、これはあなたがそれを行うだろうかです：

span { 
    visibility: hidden; 
} 

span:before { 
    visibility: visible; 
} 

---

ハック代替ソリューション

別の解決策は、ゼロにスパンのfont-sizeを設定することです*本当に小さな値に。この方法の利点：隠されたコンテンツはスペースを占有しません。欠点：:beforeコンテンツのフォントサイズには、emや％などの相対単位を使用できません。

span:before { 
    content: "Lorem "; 
    font-size: 16px; 
    font-size: 1rem; /* Maintain relative font-size in browsers that support it */ 
    letter-spacing: normal; 
    color: #000; 
} 

span { 
    font-size: 1px; 
    letter-spacing: -1px; 
    color: transparent; 
} 

Example on jsfiddle.

更新（2015年5月4日）： CSS3を使用すると、あなたが今:before要素に相対的なフォントサイズを維持するためにrem（ルートEM）ユニットを使用することができます。

---

(Browser support.)は*この記事の前のバージョンはゼロにフォントサイズを設定することが示唆されました。ただし、一部のブラウザでは、CSSがどのような動作が期待されているかを定義していないため、これはうまく動作しません。when the font-size is set to zero。ブラウザ間の互換性を確保するには、上記のような小さなフォントサイズを使用します。より良いブラウザのサポートのために

Answer 2

私は純粋なCSSとHTMLでは可能ではないと思います。この例ではhttp://jsbin.com/efeco4を見ると、contentのcssのプロパティが要素で囲まれていることがわかります。したがって、要素の任意の操作は、CSS contentにも影響します。

jqueryを使用して、タグdivのHTMLコンテンツをクラスhidetextで空にして、CSSのcontentに影響を与えないようにすることもできます。

$('.hidetext').empty(); 

例：http://jsbin.com/efeco4/2

Answer 3

：

追加span要素の中に隠されるべきテキストをラップし、あなたが隠されることを望むテキストを非表示にすることスパンにクラスを適用します。

HTML：

<span class="addbefore"> 
    <span class="visuallyhidden>This text will not show.</span> 
</span> 

がCSS：https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css

このソリューションの利点：

.addbefore:before { 
    content: "Show this"; 
} 

.visuallyhidden { 
    border: 0; 
    clip: rect(0 0 0 0); 
    height: 1px; 
    margin: -1px; 
    overflow: hidden; 
    padding: 0; 
    position: absolute; 
    width: 1px; 
} 

上記使用.visuallyhiddenクラスがHTML5 Boilerplateの現在のバージョンからのものです

• セマンティックHTML
• 完全なブラウザのサポート
• 他の小さなfont-sizeソリューションのような小さなテキストと問題はありません。
• 隠されたコンテンツは、スペースをとらないであろう

は、ここでは、アクションでそれを参照してください。http://jsfiddle.net/tinystride/A9SSb/