...">
Best IT Recipes

Hide node text in an element, but not in children

I'm having a little CSS issues and can't find a solution. I have this HTML

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

Now I want to hide only the text "Click to close", not hiding either the div or the link inside it.

Can this be done?

+43
css textnode
Mar 04 '13 at 7:32
source share
6 answers

The visibility attribute can be overridden for children, so you can do this:

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

CSS

 #closelink { visibility:collapse; } #closelink a{ visibility:visible; }

And the result is the following: http://jsfiddle.net/pavloschris/Vva84/

+55
Mar 04 '13 at 7:58
source share
 .closelink { font-size: 0px; } .close-link a { font-size: 12px; }
+9
Jul 24 '15 at 9:27
source share

Try

 <div id="closelink"> <a href="">Close</a> Click to close </div> #closelink { position: relative; left: -9999px; } #closelink a { position: relative; left: 9999px; }
+4
Mar 04 '13 at 7:42 on
source share

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

+4
Jul 09 '13 at 14:46
source share

To prevent the child from breaking into a new line (as it happens when using visibility: hidden / crashing and visibility: visible), as well as avoiding drawing the 9999px block in the browser (as a rule, frowned, because this is an extra overhead), try the following:

 <div id="closelink"> <a href="">Close</a> Click to close </div> #closelink { position: relative; visibility: hidden; } #closelink a { position: absolute; left: 0; top: 0; visibility: visible; }

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

+3
Feb 19 '14 at 19:51
source share

There are three methods I could think of:

One

  <!DOCTYPE html> <html lang="en"> <head> <style type="text/css"> #parent{ opacity: 1; } .child{ opacity: 0; } </style> </head> <body> <div id="parent"> dkjfdkf <span class="child">Annoying text</span> </div> </body> </html>

Two

  <!DOCTYPE html> <html lang="en"> <head> <style type="text/css"> #parent{ } .child{ visibility: hidden; } </style> </head> <body> <div id="parent"> dkjfdkf <span class="child">Annoying text</span> </div> </body> </html>

Three

  <!DOCTYPE html> <html lang="en"> <head> <style type="text/css"> #parent{ } .child{ display: none; } </style> </head> <body> <div id="parent"> dkjfdkf <span class="child">Annoying text</span> </div> </body> </html>

Opacity is best if you want the image to always be on the page to preserve the structure, but you do not want it to be visible. Hope this was helpful.

0
Jun 05 '15 at 10:15
source share


More articles:


All Articles