How to style an anchor tag with no href attribute?

In website development, we often come across anchors/link tags that do not have an ‘href’ attribute. This may be due to many reasons like the anchor is used just for a dropdown, or initiation of a modal, and does not link to any particular URL.

I recommend you to keep cursor style to ‘default’ and not ‘pointer’ if an anchor does not have any click function, so users may not get confused and keep on clicking it.

We can target such anchors with a CSS selector like in the code below:

a:not([href]) { 
    /* Styles for anchors without href */ 
    cursor:default; /* Can set to 'pointer' as well */
}

Demo

Open demo in a full window – https://demos.webdevpuneet.com/css/anchor-with-no-href/index.html

Demo HTML

<a class="" href="https://demos.webdevpuneet.com/css/anchor-with-no-href/index.html">This has a href <a>This anchor has no href attribute and not styled</a> 
<a class="styled-default">This anchor has no href attribute but styled cursor to default</a> 
<a class="styled-pointer">This anchor has no href attribute but styled cursor to pointer</a>

Demo CSS

a {
	color: blue;
}
a.styled-default:not([href]) {
	cursor: default;
}
a.styled-pointer:not([href]) {
	cursor: pointer;
}

How to style an anchor tag with no href attribute?

Demo

Demo HTML

Demo CSS

Similar questions with the same solution: