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

Question

You can use this css:

.inactiveLink {
   pointer-events: none;
   cursor: default;
}

And then assign the class to your html code:

<a style="" href="page.html" class="inactiveLink">page link</a>

It makes the link not clickeable and the cursor style an arrow, not a hand as the links have.

or use this style in the html:

<a style="pointer-events: none; cursor: default;" href="page.html">page link</a>

but I suggest the first approach.

That isn't too easy to do with CSS, as it's not a behavioral language (ie JavaScript), the only easy way would be to use a JavaScript OnClick Event on your anchor and to return it as false, this is probably the shortest code you could use for that:

<a href="page.html" onclick="return false">page link</a>

Yes.. It is possible using css

<a class="disable-me" href="page.html">page link</a>

.disable-me {
    pointer-events: none;
}

Or purely HTML and CSS with no events:

<div style="z-index: 1; position: absolute;">
    <a style="visibility: hidden;">Page link</a>
</div>
<a href="page.html">Page link</a>

CSS was designed to affect presentation, not behaviour.

You could use some JavaScript.

document.links[0].onclick = function(event) {
   event.preventDefault();
};