Emil Moe
Emil Moe

Emil Moe

How to Disable Links With Only CSS

How to Disable Links With Only CSS

Emil Moe's photo
Emil Moe
·Nov 18, 2020·

1 min read

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