How do I make a link unclickable?

including an onclick="return false" attribute on the anchor element does the trick. While this solution uses javascript and not css

If you want the anchor tag to be a link destination, but not a link source then omit the href attribute and only have a name attribute. The HTML 4.01 spec allows this and suggests that browsers display the text within the href-less anchor tag as normal text.

<a href="abcd.html" onclick="return false;">abcd</a>

The pointer-events CSS property can be set in modern browsers on a particular graphic element and tells under what circumstances the element can become the target of pointer events.

The none value makes sure that the element is never the target of pointer events and prevents all click, state and cursor options on the element.

a {
  display: inline-block;
  pointer-events: none;
}

<a href="http://stackoverflow.com" onclick="alert('clicked on link')">
  <svg width="140" height="140" onclick="alert('clicked on svg')">
    <rect x="10" y="10" width="120" height="120" stroke="#42858C" stroke-width="10" fill="#3E4E50" />
  </svg>
</a>

However, pointer events may target its descendant elements if those descendants have pointer-events set to some other value. In these circumstances, pointer events will trigger event listeners on this parent element as appropriate on their way to/from the descendant during the event capture/bubble phases. - MDN

a {
  display: inline-block;
  pointer-events: none;
}
a svg {
    pointer-events: fill;
}

<a href="http://stackoverflow.com" onclick="alert('clicked on link')">
  <svg width="140" height="140" onclick="alert('clicked on svg')">
    <rect x="10" y="10" width="120" height="120" stroke="#42858C" stroke-width="10" fill="#3E4E50" />
  </svg>
</a>