Hide text node in element, but not children

Question

I'm having a little trouble with CSS and can't seem to find a solution. I have this HTML

<div id="closelink">
  <a href="">Close</a>
  Click to close
</div>

Now I want to hide the text «Click to close» only, without hiding neither the div, nor the link within it.

Can this be done?

Answer 1

The visibility attribute can be overriden on children elements, so you are able to do this:

#closelink {
  visibility: collapse;
}

#closelink a {
  visibility: visible;
}

<div id="closelink">
  <a href="">Close</a> Click to close
</div>

Answer 2

.closelink {
  font-size: 0px;
}

.close-link a {
  font-size: 12px;
}

Answer 3

Try

#closelink {
  position: relative;
  left: -9999px;
}

#closelink a {
  position: relative;
  left: 9999px;
}

<div id="closelink">
  <a href="">Close</a> Click to close
</div>

Answer 4

It works but you can use visibility:hidden instead of visibility:collapse

Answer 5

To avoid the child element breaking to a new line (as happens with just using visibility: hidden/collapse and visibility: visible), and to avoid drawing a 9999px block in the browser (generally frowned upon as it is unnecessary overhead), try this:

#closelink {
  position: relative;
  visibility: hidden;
}

#closelink a {
  position: absolute;
  left: 0;
  top: 0;
  visibility: visible;
}

<div id="closelink">
  <a href="">Close</a> Click to close
</div>

You can adjust your left: 0 value to provide some padding.

Answer 6

There are three methods I could think of:

One

#parent {
  opacity: 1;
}

.child {
  opacity: 0;
}

<div id="parent">
  dkjfdkf
  <span class="child">Annoying text</span>
</div>

Two

.child {
  visibility: hidden;
}

<div id="parent">
  dkjfdkf
  <span class="child">Annoying text</span>
</div>

Three

.child {
  display: none;
}

<div id="parent">
  dkjfdkf
  <span class="child">Annoying text</span>
</div>

Opacity is best if you want the image to always be on the page to keep the structure but, you don't want it to be visible. Hope this was helpful.