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?

try to add span tag for Click to close and make that span hide.. — Gopikrishna, Mar 04 '13 at 07:35
Will [this](http://stackoverflow.com/questions/471510/hide-text-using-css) be useful? — subha, Mar 04 '13 at 07:38
Actually I can't / don't want to edit the HTML. But both xpy's and Dipesh's answers seem to work just fine :) — elveti, Mar 04 '13 at 08:12

score 119 · Accepted Answer · edited Nov 17 '21 at 15:24

119

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>

edited Nov 17 '21 at 15:24

isherwood

58,414
16
114
157

answered Mar 04 '13 at 07:58

xpy

5,481
3
29
48

7

complement of infos : http://www.w3.org/wiki/CSS/Properties/visibility collapse This value causes the entire row or column to be removed from the display, and the space normally taken up by the row or column to be made available for other content. This value is used for row, row group, column, and column group elements. If used on elements other than rows, row groups, columns, or column groups, 'collapse' has the same meaning as 'hidden'. – Milche Patern Jul 09 '13 at 15:13
nice but doesn't work with image as an icon before the text – carinlynchin Oct 02 '19 at 16:45
1

This worked for me, though I did have to add ```line-height:0;``` to xpy's ```#closelink```. Since no text follows this and the image links have their height set, I did not have to add a ```line-height:n``` for the ```#closelink a``` selector. – Parapluie Feb 08 '22 at 20:43

score 30 · Answer 2 · answered Jul 24 '15 at 09:27

30

.closelink {
  font-size: 0px;
}

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

answered Jul 24 '15 at 09:27

Thịnh Phạm

2,528
5
26
39

2

this would also keep the border of parent, if present. Worked for me :) – Shishir Arora Dec 15 '15 at 11:16
1

@Maxime Lorant, this answer worked perfectly, for my situation. Sometimes it's the simpler things in life that people need. Pure CSS for the win! I needed to hide content in a td and then dynamically convert the content and then display it in a child element of the same td parent. – Alexander Dixon Jan 21 '16 at 18:08
3

This answer worked for me, the accepted solution didn't (it keeps parent space visible). – Fernando Jun 20 '16 at 14:30
Worked for me, removes the space also. – kiltek Sep 05 '18 at 10:32
This `font-size: 0` works best if you need to 'remove' the space taken up by the text on the element. It worked best for my case than `visibility`. – Reuel Ribeiro Feb 24 '20 at 13:54

score 5 · Answer 3 · edited Nov 17 '21 at 15:25

5

Try

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

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

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

edited Nov 17 '21 at 15:25

isherwood

58,414
16
114
157

answered Mar 04 '13 at 07:42

Dipesh Parmar

27,090
8
61
90

1

Ya still gotta bump the 'a' left by the width of "Click to close", eh? – Dave Morse Jul 30 '17 at 20:29

score 3 · Answer 4 · edited Jul 09 '13 at 15:09

3

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

edited Jul 09 '13 at 15:09

jperelli

6,988
5
50
85

answered Jul 09 '13 at 14:46

mamath

39
3

5

`visibility: hidden` keeps the space the element actually would have taken. So, this might not be an expected behavior. – Елин Й. Oct 07 '14 at 08:15

score 3 · Answer 5 · edited Nov 17 '21 at 15:24

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.

score 0 · Answer 6 · edited Nov 17 '21 at 15:23

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.

Hide text node in element, but not children

6 Answers6

Linked

Related