How to disable a link using only CSS?

Question

Is there any way to disable a link using CSS?

I have a class called the current-page and want links with this class to be disabled so that no action occurs when they are clicked.

Answer 1

Try using the code given below:

.not-active {

  pointer-events: none;

  cursor: default;

  text-decoration: none;

  color: black;

}

<a href="link.html" class="not-active">Link</a>

Note: For browser support, refer to this link: https://caniuse.com/#feat=pointer-events.