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="link.html" aria-current="page">Link</a>
For browser support, please see https://caniuse.com/#feat=pointer-events. 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.
.disabled {
pointer-events: none;
cursor: default;
opacity: 0.6;
}
<a href="#" class="disabled">link</a>