How to Hide Links Using CSS

Hiding a link with CSS can be done a number of ways, but we'll look at two methods in which a URL can be completely hidden from view. If you want to create a scavenger hunt or easter egg on your site, this is an interesting way to hide links.

The first way is by using "none" as the pointer-events CSS property value. The other is by simply coloring the text to match the background of the page.

Keep in mind that neither method will make the link totally disappear from being found when searching the source code.

However, visitors will not have a simple, straightforward way in which to see it, and your novice visitors won't have a clue how to find the link.

Note: If you're looking for instructions on how to link an external style sheet, these instructions are not what you're after. See What an External Style Sheet? instead.

Disable the Pointer Event

The first method we can use to hide a URL is to make the link do nothing. When the mouse hovers over the link, it won't show what the URL points to and it won't let you click it.

Write the HTML Correctly

One the web page, make sure the hyperlink reads like this:

<a href="https://www.thoughtco.com/" class="active">ThoughtCo.com</a>

Of course, "https://www.thoughtco.com/" needs to point to the actual URL that you want hidden, and ThoughtCo.com can be changed to any word or phrase you like that describes the link.

The idea here is that the class active will be used with the CSS below to effectively hide the link.

Use This CSS Code

The CSS code needs to address the active class and explain to the browser that the event upon the link click, should be "none," like this:

.active {
 pointer-events: none;
 cursor: default;
 } 

You can see this method in action over at JSFiddle. If you remove the CSS code there, and then rerun the data, the link suddenly becomes clickable and usable.

This is because when the CSS isn't applied, the link behaves normally.

Note: Remember that if the user views the page's source code, they'll see the link and know exactly where it goes because like we see above, the code is still there, it just isn't usable.

Change the Link's Color

Normally, a web designer will make hyperlinks a different color than the background so that visitors can actually see them and know where they go. However, we're here to hide links, so let's see how to change the color to match that of the page.

Define a Custom Class

If we use the same example from the first method above, we can simply change the class to whatever we want so that only special links are hidden.

If we didn't use a class and instead applied the CSS from below to every link, then all of them would disappear. That's not what we're after here, so we'll use this HTML code that's using the custom hideme class:

<a href="https://www.thoughtco.com/" class="hideme">ThoughtCo.com</a>

Find Out What Color to Use

Before we enter the appropriate CSS code to hide the link, we need to figure out what color we want to use. If you have a solid background already, like white or black, then that's easy. However, other special colors need to be exact too.

For instance, if your background color has a hex value of e6ded1, you need to know that for the CSS code to work properly for the page you're wanting it to disappear into.

There are plenty of these "color picker" or "eyedropper" tools available, one of which is called ColorPick Eyedropper for the Chrome browser. Use it to sample the background color of your web page to get the hex color.

Customize the CSS to Change the Color

Now that you have the color that the link should be, it's time to use that and the custom class value from above, to write the CSS code:

.hideme {
 color: #e6ded1;
}

If your background color is simple like white or green, you don't have to put the # sign before it:

.hideme {
 color: white;
}

See this method's sample code in this JSFiddle.