CSS Selector for hidding a text

Question

Consider below HTML

<nav id="nav-main">
    <li> 
        <a href="javascript:void(0)"> 
           <img src="http://jsfiddle.net/img/initializing.png">
         <span>Sample Link</span>
       </a>
       Hide Me with CSS
   </li>
</nav>

Is it possible to remove or hide the Hide Me With CSS with CSS?

I tried:

#nav-main li a:after{
    content: "";
}

But no luck.

http://jsfiddle.net/6powxzru/

I can not change the above HTML as this is a dynamically generated code (with a JSP tag).

Answer 1

I can not change the above html as this is a dynamically generated code

Change the font-size

#nav-main li {
  font-size: 0;
}
#nav-main li a {
  font-size: 12px;
}

<nav id="nav-main">
  <li>
    <a href="javascript:void(0)">
      <img src="http://jsfiddle.net/img/initializing.png" />
      <span>Sample Link</span>
    </a>
    Hide Me with CSS</li>
</nav>

Answer 2

One way to achieve this is to set visibility: hidden for the li and then set it to visible for the a inside the li.

#nav-main li {
  visibility: hidden;
}
#nav-main li a {
  visibility: visible;
}

<nav id="nav-main">
  <li>
    <a href="javascript:void(0)">
      <img src="http://jsfiddle.net/img/initializing.png">
      <span>Sample Link</span>
    </a>Hide Me with CSS</li>
</nav>

Answer 3

Remove the text node with JS:

var node = document.querySelector('#nav-main > LI > A').nextSibling;
node.parentNode.removeChild(node);

Answer 4

How about you try the following approach (not sure if possible in your case, though):

• Color li within nav with the background color of the whole container, so the text is not visible any more.

• After that, you would style individual elements based on colors you want. If the container background is white, you would start with:

  nav-main li{color:#FFF;}

  nav-main li a{color:#000;}

etc.

Answer 5

From W3Schools:

The ::after selector inserts something after the content of each selected element(s).

This means any content you add in the after "element" will appear after but still inside the original element, which in your case is the a tag.

Also, you cannot remove text using the content property which was not added using the content property. So, to hide such text which is outside the a but inside the li on a specific event, such as hover, you can instead do something like this.

#nav-main li:after {
    content: "Hide Me With CSS";
}
#nav-main li:hover:after {
    content: "";
}

<nav id="nav-main">
    <li> 
        <a href="javascript:void(0)"> 
           <img src="http://jsfiddle.net/img/initializing.png">
         <span>Sample Link</span>
       </a>
   </li>
</nav>