Hide text node in element, but not children
CssTextnodeCss Problem Overview
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?
Css Solutions
Solution 1 - Css
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>
Solution 2 - Css
.closelink {
font-size: 0px;
}
.close-link a {
font-size: 12px;
}
Solution 3 - Css
Try
#closelink {
position: relative;
left: -9999px;
}
#closelink a {
position: relative;
left: 9999px;
}
<div id="closelink">
<a href="">Close</a> Click to close
</div>
Solution 4 - Css
It works but you can use visibility:hidden
instead of visibility:collapse
Solution 5 - Css
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.
Solution 6 - Css
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.