Comment puis-je masquer les nœuds de texte dans un élément à l'aide de CSS tout en gardant les autres éléments visibles ?

Ciblage des nœuds de texte dans les éléments

CSS vous permet de styliser des éléments spécifiques et leurs enfants, mais que se passe-t-il si vous souhaitez masquer ou manipuler le du texte dans un élément tout en laissant les éléments environnants visibles ? Considérez ce HTML :

<div>
<p>L'objectif est de masquer le texte "Cliquez pour fermer" sans affecter le div ou le lien qu'il contient.</p>
<p><strong>Utiliser la visibilité</strong></p>
<p>La propriété de visibilité peut masquer ou afficher des éléments. Cependant, contrairement à la propriété display, la visibilité peut être définie individuellement pour les éléments enfants. Cela vous permet de masquer de manière sélective les nœuds de texte :</p>
<pre class="brush:php;toolbar:false">#closelink {
  visibility: collapse;
}

#closelink a {
  visibility: visible;
}

Dans cet exemple, la visibilité du div (#closelink) est « réduite », masquant tout son contenu, y compris les nœuds de texte. Cependant, la visibilité du lien dans le div (a) est définie sur « visible », remplaçant la visibilité du parent et révélant le lien et le texte qu'il contient.

Cette technique dissimule efficacement les nœuds de texte tout en préservant la visibilité de éléments environnants, fournissant une solution rapide et simple pour une manipulation fine du contenu en CSS.