要素の内容を非表示にしながらも、その内容を表示したままにする方法はありますか:before? 次のコードがあるとします。
HTML:
<span class="addbefore hidetext">You are here</span>
CS: ...
.addbefore:before {
content: "Show this";
}
.hidetext {
// What do I do here to hide the content without hiding the :before content?
}
私はもう試した：
- を使用し
display: none、display: inlineオンに設定しています:beforeが、両方ともまだ非表示になっています - ;を使用しています
width: 0; overflow: hiddenが、追加のスペースが追加されるようです (?) - color: transparent; を使用しますが、もちろん、span のコンテンツは依然としてスペースを占有します。
- を使用しています
text-indent: -....pxが、- これは検索エンジンに嫌われ、
- span 要素では機能しないようです (?)
これを実行する方法について他に何かアイデアはありますか?
ベストアンサー1
クリーンソリューション
を使用することもできますvisibility: hiddenが、この解決策では、非表示のコンテンツは依然として場所を取るこれが問題にならない場合は、次のようにします。
span {
visibility: hidden;
}
span:before {
visibility: visible;
}
ハッキング的な代替ソリューション
もう一つの解決策は、font-sizeスパンの
ゼロに
* を非常に小さい値に設定します。この方法の利点: 非表示のコンテンツはスペースを占有しません。欠点: コンテンツのフォント サイズに em や % などの相対単位を使用できません:before。
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;
}
更新（2015年5月4日）:CSS3 では、rem(Root EM) 単位を使用して、要素内の相対的なフォント サイズを維持できるようになりました:before。(ブラウザのサポート)
*この投稿の以前のバージョンでは、フォントサイズをゼロに設定することを提案していました。しかし、CSSでは期待される動作が定義されていないため、一部のブラウザでは期待どおりに動作しません。フォントサイズがゼロに設定されている場合クロスブラウザ互換性を確保するには、上記のように小さいフォント サイズを使用します。