How to remove a link and replace it with message via CSS - html

Question

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?

Answer 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>
I am a secret link
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).