CSS Trick to Disable Links

Problem:

Is it possible to disable links using CSS? For instance, if you have a class called "current-page," you may want to prevent links with that class from being active when clicked.

Solution:

The following CSS code snippet offers a simple solution:

[aria-current="page"] {
  pointer-events: none;
  cursor: default;
  text-decoration: none;
  color: black;
}

This code targets elements with the "aria-current='page'" attribute and disables their interactivity by setting "pointer-events" to "none." It also removes the typical link styling by setting "cursor" to "default," removing text decoration, and resetting the text color to black.

To apply this solution in HTML, you can modify your link as follows:

Link

This will disable the link and prevent it from being clickable when the "current-page" class is applied.