How to disable a link using only CSS

From this solution:

[aria-current="page"] {
  pointer-events: none;
  cursor: default;
  text-decoration: none;
  color: black;
<a href="" aria-current="page">Link</a>

For browser support, please see If you need to support Internet Explorer, there is a workaround; see this answer.

Warning: The use of pointer-events in CSS for non-SVG elements is experimental. The feature used to be part of the CSS 3 UI draft specification but, due to many open issues, has been postponed to CSS 4.

Leave a Comment