How Can I Disable Links Using CSS?

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:

<a href="link.html" aria-current="page">Link</a>

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

The above is the detailed content of How Can I Disable Links Using CSS?. For more information, please follow other related articles on the PHP Chinese website!