Member Avatar for jamello

Hi there folks! Please could anyone tell me how I can display a hyperlink without its customary underline? It must be pretty simple but I could not get a hang of it.

Thanks for the help!:cheesy:

  • 4 Contributors
  • 5 Replies
  • 126 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by rsatyajit77

Dani AI

Generated

Short version: the underline is a visual style, so fix it in CSS (prefer a reusable class or a framework utility rather than an inline style or a single ID). and pointed to the right approach; ’s class idea is also fine but avoid the old HTML-comment wrapper inside <style>—that was only ever needed for very ancient browsers.

A few practical, modern points and a small pattern you can drop into a stylesheet:

  • Prefer a class (scalable), or if you use Bootstrap 5+, the built-in utility text-decoration-none can be applied directly (see the Bootstrap text utilities).
  • Don’t simply remove the visual cue for everyone: if the underline is removed, provide another clear affordance (color change, visible focus ring) so users who rely on underlines or keyboard navigation aren’t disadvantaged.
  • Use :focus-visible (or :focus) to keep or enhance keyboard focus styling instead of removing outlines entirely.

Example pattern (keeps underline off visually, uses a border-based hover and a clear keyboard focus style):

a.no-underline {
  text-decoration-line: none;
  color: #0069d9;
  border-bottom: 2px solid transparent;
  transition: border-color .15s ease;
  text-underline-offset: .15em;
}

a.no-underline:hover,
a.no-underline:focus {
  border-bottom-color: currentColor;
}

a.no-underline:focus-visible {
  outline: 3px solid #ffbf47;
  outline-offset: 3px;
}

Troubleshooting tips: if an underline persists, inspect the computed styles in DevTools—user-agent and other rules (higher-specificity selectors or frameworks) can override yours. Increase specificity or place your rule after framework CSS; use !important only as a last resort. For reference on modern CSS properties and focus handling, see the MDN pages for text-decoration and :focus-visible and the Bootstrap utilities documentation.

Recommended Answers

All 5 Replies

Member Avatar for Member #114696

CSS would help....

<html>

<head>
  <title></title>
  <style type="text/css">
    a#link
    {
        text-decoration: none;
    }

  </style>
</head>

<body>
     <a href="http://google.com" id="link">Google</a>
</body>

</html>
Member Avatar for jamello

thank you very much. I'll try it in a moment, You are the champ!
:D

Member Avatar for pygmalion

another way - straight in the HTML code - would be to add the following as an <a> - parameter.

style="text-decoration:none"

hope this helped
pygmalion

Member Avatar for jamello

Yes! both approaches worked! thanks:lol:

Member Avatar for rsatyajit77

Yes! both approaches worked! thanks:lol:

To Disabling the underline of a hyperlink

<style type="text/css">
<!--
.w {
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
}
-->
</style>

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.