How to Make Text Look Like a Hyperlink Without Making it Clickable

Introduction

Have you ever needed text that looks like a hyperlink but isn’t actually clickable? Whether you’re designing a webpage with placeholder links, creating non-interactive elements, or just experimenting with web styling, this simple trick is incredibly useful. In this post, we’ll walk through multiple ways to style text to look like a hyperlink without making it an actual clickable URL.

Method 1: Styling Text with CSS Only

Using CSS, you can easily style any text to appear like a hyperlink by applying typical link styles like color, underline, and pointer cursor. This method is perfect if you want the appearance of a link without the functionality.

Code Example:

<p class="pseudo-link">This looks like a hyperlink but isn't clickable.</p>

CSS:

.pseudo-link {
    color: blue;
    text-decoration: underline;
    cursor: pointer; /* Optional: mimics link behavior */
}

Explanation:
This method styles a <p> element (or any other non-link element) so it visually resembles a link but won’t respond to clicks. It’s a simple, efficient approach for non-clickable hyperlink styling.

Method 2: Using a <span> with CSS Styling

Another option is to wrap the text inside a <span> tag and apply hyperlink styling to the span. This way, you’re still not using an actual link element (<a>), but the appearance is preserved.

Code Example:

<span class="pseudo-link">This text looks like a link but isn’t clickable.</span>

CSS:

.pseudo-link {
    color: #0066cc;
    text-decoration: underline;
    cursor: pointer;
}

Explanation:
Like the previous method, this approach uses CSS styling to create the look of a link. The cursor: pointer property enhances the effect by making it seem clickable, though it remains purely visual.

Method 3: Disabling Link Clicks with pointer-events: none;

If you’re working with an <a> tag but don’t want it to be clickable, you can disable interaction using pointer-events: none;. This CSS property prevents any user interaction with the link, so while it appears like a hyperlink, it doesn’t function as one.

Code Example:

<a href="#" class="disabled-link">This looks like a hyperlink but doesn't work.</a>

CSS:

.disabled-link {
    color: #0066cc;
    text-decoration: underline;
    pointer-events: none;
    cursor: default;
}

Explanation:
Setting pointer-events: none; on an <a> tag disables all interactions. This is particularly useful if you need a true <a> tag for styling or structure but don’t want users clicking on it.

Method 4: Preventing Click Events with JavaScript

If you prefer using an <a> tag but need to make it non-clickable, a simple JavaScript solution can block the default behavior when clicked.

Code Example:

<a href="#" onclick="event.preventDefault()">Non-clickable link text</a>

Explanation:
Adding onclick="event.preventDefault()" stops the <a> tag from navigating anywhere. The link will still look and behave like a hyperlink visually, but no action occurs when it’s clicked.

Summary

Creating non-clickable hyperlinks can be easily achieved with a few CSS tricks or JavaScript for additional customization. These methods are helpful in many scenarios, from placeholder links to purely aesthetic hyperlink text. Experiment with these techniques to find the best fit for your design needs.