How To Style An Anchor Tag With No Href Attribute? - Misc

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; }

Similar questions with the same solution:

• How to style an HTML anchor with no link?
• How to set cursor style to pointer or default for links without href?
• How to style <a> without href attribute?

• CSS Tools
  • CSS Animation Generator
  • CSS Media Queries Generator
  • CSS Grid Layout Generator
  • CSS Box Shadow Generator
  • CSS Text Shadow Generator
  • CSS Gradient Generator
  • CSS Animated Gradient Generator
  • CSS Easing Generator
  • CSS Clip Path Generator
  • CSS Autoprefixer
• Image Tools
  • Image Resizer & Compressor
  • Bulk Image Resizer & Compressor
  • Image Cropper
  • Image Editor
  • Image to SVG Converter
• Color Tools
  • Color Picker
  • Image Color Picker
  • Popular Color Selector
• Minify & Beautify Tools
  • HTML / CSS / JS Minifier
  • JavaScript Minify and Uglify
  • HTML Formatter / Beautifier
  • CSS Formatter / Beautifier
  • JavaScript Formatter / Beautifier
• Other Tools
  • Difference Checker
  • Image to Base64 Converter