How Can I Hide Text Nodes in a Div Using CSS While Keeping Other Elements Visible?

Hiding Element Text Nodes with CSS

You have a div element containing an anchor tag and a text node. You want to hide only the text node without affecting the visibility of the div or the anchor tag. The visibility attribute can be used to achieve this.

CSS Solution

The following CSS code accomplishes your goal:

#closelink {
  visibility: collapse;
}

#closelink a {
  visibility: visible;
}

In this code:

• #closelink hides the div and its entire contents, including the text node.
• #closelink a overrides the visibility attribute for the anchor tag within the div, making it visible again.

HTML

Your HTML remains unchanged:

<div><p>This CSS solution effectively hides the text node "Click to close" while leaving the div and anchor tag visible.</p></div>

The above is the detailed content of How Can I Hide Text Nodes in a Div Using CSS While Keeping Other Elements Visible?. For more information, please follow other related articles on the PHP Chinese website!