How to Hide Links Using CSS

Hiding a link with CSS can be done in 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. Neither method hides the link if someone inspects the HTML 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.

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:

Lifewire.com 

Of course, "https://www.lifewire.com/" needs to point to the actual URL that you want hidden, and Lifewire.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 listed below to effectively hide the link.

Use This CSS Code

Read More

Learn an Easy Way to Remove the Underlines From Links in HTML

By Jennifer Kyrnin

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.

Change the Link's Color

Normally, a web designer will make hyperlinks a contrasting color from the background so that visitors can 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:

Lifewire.com

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.

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.