Add CSS cursor property when using “pointer-events: none”

Question

I\'m trying to disable a specific link and apply cursor style but this CSS command cursor: text; won\'t effect. The cursor is always default. I\'m using latest

Answer 1

Rather than wrapper, this can be done with pure CSS from the insides as well. (I use this with material web component, so the code gets a little more complex.)

button:disabled {
    > * {
        cursor: not-allowed;
        pointer-events: initial;
    }

    &::before {
        background-color: #fff0;
    }

    &::after {
        background-color: #fff0;
    }
}

I also tried ::before and ::after with button:disabled directly, but just couldn't make it happen...