Browsed by
Tag: jQuery

CSS Pointer Events

CSS Pointer Events

This is maybe only needed in some edge cases, but you can use pointer-events to make psuedo elements (:after and :before) clickable via javascript.

Note: Preferable to use clickable elements if you can though!

My original code when I needed this as a work around.

SCSS Code

.add-chevron {
    // prevents clicking on element from working
    pointer-events: none; 

    // Necessary for allowing any clickable elements within the parent to work. 
    a, a:visited, button {
        pointer-events: all;
    }
    &:after {
        content: 'click me';
        display: block;
        height: 34px;
        width: 34px;
        // allows this pseudo element to be clickable
        pointer-events: all;
    }
}
CSS Tricks : pointer-events

https://caniuse.com/#feat=pointer-events