When building web pages, there are times you might want an anchor link (<a>) to be visible but non-functional. Perhaps you’re still working on that section of your website, or the link is for decorative purposes only. Whatever the reason, making an anchor not clickable is simple with a few CSS rules.

The Code Snippet

Let’s start with a quick code snippet that makes an anchor tag unclickable:

<a href="#" class="inactive-link">Unclickable Link</a>

Then, in your CSS, add the following styles:

.inactive-link {
    pointer-events: none;
    cursor: default;
}

A Use Case for This Approach

Let’s say you have a navigation menu, but one of the pages is under construction. You still want the link to be visible for design consistency, but don’t want users to interact with it. Here’s an example:

<nav>
  <ul>
    <li><a href="/home">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="#" class="inactive-link">Contact (Coming Soon)</a></li>
  </ul>
</nav>

Conclusion

With just a couple of lines of CSS, you can make any anchor tag unclickable. It’s a quick and effective way to manage inactive or placeholder links on your website. Try this technique next time you need a link to be visible but non-functional!