How to Disable Links With Only CSS

How to Disable Links With Only CSS

·

1 min read

Agreed, this is a bit of a hack.

To keep things streamlined with WordPress, I had to implement this hack the other day, where I wanted to disable tag links on just 1 page.

Instead of fiddling with a new plugin, I found it easier, in this case, to disable the link in the template engine with pure CSS.

The magic to remove the link feature lies in pointer-events while the rest ensures it doesn't look like one.

a.disabled {
  pointer-events: none;      
  text-decoration: none;
  cursor: default;  
  text-decoration: none;
}

The semantics might be up for discussion, but the performance is possibly better than using Javascript.

This approach is available to all major browsers: CSS pointer-events (for HTML)