0

I'm trying to remove a link completely via CSS and replace it with my own custom message. Is this possible? I found some link disabling via css but the anchor text is still visible, and doesn't allow me to include my own message.

Essentially I want to make it so only logged in members can view links, using a conditional that uses CSS only for non-logged in (guests) users, replacing download links with "Sorry, only members can see this link, register here"

Any ideas?

shenku
  • 11,969
  • 12
  • 64
  • 118
user1446650
  • 1,197
  • 6
  • 15
  • 24

1 Answers1

1

CSS would be a terrible way to add privacy to your element, as it could be seen in any case by inspecting the source code, or by just disabling CSS.

You have to hide your link server-side.

By the way, just for the sake of completeness, and in case you have to use such a thing for something that actually makes sense doing by CSS, you could go around doing it by adding a class to the html or body in case of non-authenticated users, and then having a CSS rule as such:

html.not-logged-in element {
    display: none;
}

Keep in mind that, obviously anybody can still see the element if they want.

Edit

You can't change text with CSS (unless using the content property in a pseudo-element, but nevermind that, as you won't be able to change the href attribute of your link). So, to achieve what you are looking for, you need to have two separate elements. As I said above, add a class to your html or body when the user is authenticated (this is actually a good idea in general), then show and hide your elements conditionally.

So your HTML would look something like this:

<span class="error">Sorry, only members can see this link</span>
<a href="#" class="secret">I am a secret link</a>

And your CSS would look like this:

.not-logged-in .secret { 
      display: none;
}

.logged-in .error { 
      display: none;
}

You can see an example here. In this example I use Javascript to simulate your logging-in process (all I do in Javascript is really just adding the class to the html element).

Sunyatasattva
  • 5,619
  • 3
  • 27
  • 37
  • Thank you for the comment. However, I tried this before and this removes the display entirely. I want to not only remove the link but replace it with a message. Is this possible? Thank you – user1446650 Apr 10 '14 at 02:17
  • Edited my answer with some more information and a working example. – Sunyatasattva Apr 10 '14 at 10:55