How to Hide Anchor Text Without Hiding the Anchor

How do I hide anchor text without hiding the anchor?

Try

 a{
    line-height: 0; 
    font-size: 0;
    color: transparent; 
 }

The color: transparent; covers an issue with Webkit browsers still displaying 1px of the text.

CSS hide a a text without hiding the image

With the text-indent:

a{

    text-indent: -999999px;
}

i hope this works for you

Hide anchor, but not anchor text

Replace the <a> with a generic <span>, and back again.

A simple strategy to replace would be:

1. find the node.
2. add the replaced node before it
3. remove the first node

--

var node = document.getElementById("example");
var new_node = document.createElement("a"); // or "span"
new_node.innerText = text;
node.parentNode.insertBefore(new_node, node);
node.parentNode.removeChild(node);

This code isn't complete, but just to give you an idea.

Hiding the text inside of an anchor tag in CSS

I'm not aware of a way to do that. I'd simply wrap it in a span with a class. It also makes it clearer what's going on here.

<ul>
    <li><a href="#"><span class="nav__inner">Dashboard</span> <i class="fa fa-home"></i></a></li>
    <li><a href="#"><span class="nav__inner">Settings</span> <i class="fa fa-gears"></i></a></li>
    <li><a href="#"><span class="nav__inner">Users</span> <i class="fa fa-users"></i></a></li>
    <li><a href="#"><span class="nav__inner">Forums</span> <i class="fa fa-object-group"></i></a></li>
    <li><a href="#"><span class="nav__inner">Matches</span> <i class="fa fa-calendar"></i></a></li>
    <li><a href="#"><span class="nav__inner">Servers</span> <i class="fa fa-server"></i></a></li>
</ul>

CSS:

.nav__inner {
    display: none;
}

@media (min-width: 768px) {
    .nav__inner {
        display: inline-block;
    }    
}

Hiding the text of a link

The best way to do this would be to use visibility: hidden; on your element and visibility: visible; on the before.

div {
  visibility: hidden;
}

div:before {
  visibility: visible;
}

This solution should work fine if you don't care about your div still taking up space after it's hidden.

Using CSS or JS to hide text inside the a href tag

Usually done by negative indentation, which is SEO friendly; opposed to visibility: hidden; or display:none;

display: inline-block;
text-indent: -999px;

But since you need the :before pseudo on the same element the above will not work well,

therefore font-size might be a better solution for your case:

li a{

  font-size: 0;            /* make really small */

}

li a:before{

  content: "CLICK";

  font-size: 1rem;         /* reset to 1 root-em for the pseudo */

}

<ul>

    <li><a href="link">Part 1</a></li>

    <li><a href="link">Part 2</a></li>

    <li><a href="link">Part 3</a></li>

</ul>

How to hide Anchor icon when jump to specific part of page

$( ".scroll-regform" ).click(function() {
  $(this).addClass('hideIcon')
});

.scroll-regform, .mobile {
    display: block!important;
}
.scroll-regform {
    right: 44%;
    top: 200px;
    cursor: pointer;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    z-index: 3;
    line-height: 30px;
    text-align: center;
    font-size: 28px;

}
.scroll-regform.hideIcon{
  display: none !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#scroll-regform" href="#" class="scroll-regform"><i class="fa fa-angle-down animated-menu bounce" aria-hidden="true" alt="download" class="pt-8">ICON</i></a>
 
 <div class="col-md-7" id="scroll-regform">
 <p>content</p>
 </div>

hide just the content of anchor tag and add class on media query

Solution1:

<a class="product desktop-screen"><?php echo $button_add_to_cart ?></a>
<a class="product mobile-screen"><?php echo $cart ?></a>

css:

desktop-screen{display:block;}
mobile-screen{display:none;}

@media only screen and (max-width: 479px) {
        desktop-screen{display:none;}
        mobile-screen{display:block}
    }
}

Solution2:
using jQuery

<a class="product"><?php echo $button_add_to_cart ?></a>

<script>
$(window).on('resize', function(){
      var win = $(this);
      var a_tag_text = "add to cart";
      var icon = "<i class="fa fa-cart"></i>"
      if (win.width() <= 479) {
          $(".product").html(icon);
      }else{
          $(".product").html(a_tag_text + icon);
      }
});
</script>

Hide Anchor based on Text

As others have mentioned, the code does work as intended.

There are two reasons I can think of that would explain why this does not work for you:

1) You are not waiting for the DOM to be loaded before trying to hide the links.
As mentioned, be sure to wait by running this on the DOM ready event which can be written like such:

 $(function() {
    $('a.specialButton:contains("SH")').hide();
});

2) Perhaps your table is getting populated from some AJAX call. If this is the case, then you need to run this function every time after the table is populated. Also, it would probably be a good idea to save a reference to the table and filter through just the table, and not your entire page. This will help performance.

var $table = $('table.k-tree-table');

// This would be your callback for the AJAX to populate the table
function gotDataForTreeTable(data) {
    // your code for populating table goes here

    $table.find('a.specialButton:contains("SH")').hide();
}

I hope this helps and good luck.

Edit: Thanks for marking the answer correct. I am not sure what your conditions are for hiding the link, but it also dawned on me today that you could perhaps use CSS without needing additional Javascript.

td[cellGroup="SH"] a.specialButton { 
    display:none; 
}

---

Related Topics