Is it possible to make an HTML anchor tag not clickable/linkable using CSS?

In CSS, we can implement this by setting the pointer-events property to none. After applying this setting, HTML anchor tags become non-clickable, meaning users cannot click the link to redirect to other pages or sites.

Example Code:

Suppose we have an HTML page containing an anchor tag:

html
<a href="https://example.com" id="non-clickable-link">Click Me!</a>

We can set this in CSS as:

css
#non-clickable-link {
    pointer-events: none;
}

This CSS code sets the pointer-events property of the anchor tag with id non-clickable-link to none, making it unresponsive to mouse events, including clicks. Consequently, when users click the link, the browser does not trigger navigation.

Notes:

• After setting pointer-events: none;, the link still appears clickable (e.g., showing a hand cursor on hover). To change the cursor display, you can further set cursor: default; to maintain the default cursor state instead of the link-specific hand cursor.
• This method is primarily used for frontend display control. If you need to fundamentally disable the link, it's better to omit the href attribute in the HTML tag or use JavaScript for control.
• This CSS technique is commonly used in scenarios requiring temporary link disablement, such as in permission controls or page states where specific actions or navigations are restricted. Implementing it with CSS is quick, efficient, and convenient.