Disable HTML anchor tag links using CSS

To make a great user experience sometimes a few links should be disabled. It prevents users from unwanted clicks on links.

You can do it using the following CSS methods.

Disable HTML links in different ways using CSS

1: Disable all anchor tags in HTML 

The following method will disable all HTML links within your web page.

a{pointer-events: none;
  cursor: default;
  text-decoration: none; 
}

<a href="index.php" aria-current="page">Link Text</a>

2: Disable a few links using the CSS class

You can disable links using custom CSS classes. You can also use bootstrap class instead. In this method, you are able to disable the link you only want to. 

<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>

Note: CSS can only disable click events. You can still use tab + enter to "click" the link. 

To disable the link properly you should remove href attribute in your <a> tags. You can remove href attribute dynamically using PHP or js.

3: Disable specific anchor tag link

You can disable any specific link for different purposes and in different ways. So the process varies according to your needs. 

Process 1:

The following code will disable links for specific websites or paths.

//specific website
[href="//example.com"]{ 
  pointer-events: none;
}
//specific directory for perticular website
[href="//example.com/directory/directory"]{ 
  pointer-events: none;
}
//specific website which contain path
[href^="//example.com/"]{
  pointer-events: none;
}
//disable every website instead one
a[href*="//"]:not([href*="website.com"]) {
    pointer-events: none;
}

<a href="//example.com">Specific website</a>
<a href="//example.com/directory/directory">Specific directory</a>

Process 2:

The following code will disable specific words inside the directory or path.

[href*="/specific words in directory/"]{
  pointer-events: none;
}

<a href="//example.com/specific words in directory/path/path">Contains in path</a>

Process 3:

The following code will disable non-https links.

a:not([href^="https://"]){
  pointer-events: none;
}

Process 4: 

The following code will disable specific file extensions inside the directory.

[href$=".html"]{
  pointer-events: none;
}

<a href="index.html">Html</a>

Process 5:

CSS can catch HTML attributes also.

[target=_blank]{
  pointer-events: none;
}

<a href="#" target="_blank">Outside</a>

It is common practice to disable HTML links using JavaScript. But some browser extensions can disable JS easily. In that case, using CSS is more secure.