他の要素を表示したまま、CSS を使用して要素内のテキスト ノードを非表示にするにはどうすればよいですか?

要素内のテキスト ノードをターゲットにする

CSS を使用すると、特定の要素とその子のスタイルを設定できますが、周囲の要素を表示したまま、要素内のテキストを表示しますか?次の HTML について考えてみましょう:

<div>
<p>目的は、div やその中のリンクに影響を与えずに、「クリックして閉じる」というテキストを非表示にすることです。</p>
<p><strong>可視性の活用</strong></p>
<p>visibility プロパティは要素を非表示または表示できます。ただし、表示プロパティとは異なり、子要素の可視性を個別に設定できます。これにより、テキスト ノードを選択的に非表示にすることができます:</p>
<pre class="brush:php;toolbar:false">#closelink {
  visibility: collapse;
}

#closelink a {
  visibility: visible;
}

この例では、div (#closelink) の可視性が「折りたたまれ」、テキスト ノードを含むコンテンツ全体が非表示になります。ただし、div (a) 内のリンクの可視性は「可視」に設定され、親の可視性がオーバーライドされ、リンクとそのリンクに含まれるテキストが表示されます。

この手法では、テキスト ノードの可視性を維持しながら効果的にテキスト ノードを非表示にします。要素を囲み、CSS でのきめ細かいコンテンツ操作のための迅速かつ簡単なソリューションを提供します。