Making a Link Look Like Plain Text Using CSS

By default, links (<a> tags) are styled with an underline and a different color to indicate their interactivity. However, there are cases where you may want a link to appear as regular text while still being clickable. This can be achieved using CSS by removing the default styling.

To make a link look like plain text, we remove the underline using text-decoration: none;, set the color to inherit from the surrounding text, and remove any cursor changes. Below is the basic CSS code:

</>
Copy
/* Make link look like plain text */
a.plain-text {
  text-decoration: none;
  color: inherit;
  cursor: text;
}

Example

Example 1. Removing Link Styling to Make It Look Like Plain Text

In this example, we apply the plain-text class to a link, making it appear like regular text while still being clickable.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <style>
    /* Make link look like plain text */
    a.plain-text {
      text-decoration: none;
      color: inherit;
      cursor: text;
    }
  </style>
</head>
<body>
  <p>This is a <a href="https://www.example.com" class="plain-text">hidden link</a> inside a paragraph.

</body>
</html>

Output:

Conclusion

Using CSS, you can easily remove the default link styling to make a hyperlink look like plain text while still keeping its functionality.