Anchor tag in HTML: How to disable HTML link using CSS?

To make a great user experience sometimes a few links should be disabled. It prevents users from unwanted clicks on such links.
It can be done dynamically but using CSS also. There are different uses of it. You should determine first, what do you want to.

Disable anchor tag or html link using css

Disable HTML links in different ways using CSS

Method 1: Disable all html link within web page
Method 2: Disable few links using CSS class
Method 3: Disable only specific links

Method 1: Disable all anchor tag 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>

Method 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.

Method 3: Disable specific link

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

Process 1: 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: 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: Following code will disable non-https links.

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

Process 4:  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.