Add CSS cursor property when using "pointer-events: none"

By specifying pointer-events:none you are actively declaring that there is no mouse interaction between the element and the cursor. Therefore it cannot have a cursor either - it's invisible to all mouse behaviours.

Proof to be found here.

It's pretty long since original question, but this is my solution without any wrapping element and cursor with no pointer-events:

<!-- Add tabindex="-1" so that element cannot be reached by keyboard -->
<a href="url" aria-disabled="true" tabindex="-1" onfocus="blur()">Disabled link</a>

CSS:

/* Adding cursor just works: */
a[aria-disabled="true"] {
    cursor: not-allowed;
}

/* Makes link non-clickable: */
a[aria-disabled="true"]:active {
    pointer-events: none;
}

CodePen Example

EDIT:

• Chrome has started to add focus on click on elements with tabindex attribute (even with tabindex="-1"). Fastest solution is to set onfocus="blur()" to unfocus element.
• You need to prevent focusing the element otherwise it could be activated by enter key

EDIT 2

• Replaced class="disabled" with aria-disabled="true" to meet the a11y ;)

Using pointer-events: none will disable all mouse interactions with that element. If you wanted to change the cursor property, you would have to apply the changes to the parent element. You could wrap the link with an element and add the cursor property to it.

Example Here

HTML

<span class="wrapper">
    <a href="#">Some Link</a>
</span>

CSS

.wrapper {
    position: relative;
    cursor: text;  /* This is used */
}
.wrapper a {
    pointer-events: none;
}

There are a few browser inconsistencies, though. To make this work in IE11, it seems like you need a pseudo element. The pseudo element also allows you to select the text in FF. Oddly enough, you can select the text in Chrome without it.

Updated Example

.wrapper:after {
    content: '';
    position: absolute;
    width: 100%; height: 100%;
    top: 0; left: 0;
}