Emil Moe

Emil Moe

How to Disable Links With Only CSS

How to Disable Links With Only CSS

Subscribe to my newsletter and never miss my upcoming articles

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)

 
Share this