html - 如何删除链接并通过 CSS 将其替换为消息

Question

我正在尝试通过 CSS 完全删除链接并用我自己的自定义消息替换它。这可能吗？我发现通过 css 禁用了一些链接，但 anchor 文本仍然可见，并且不允许我包含我自己的消息。

基本上我想做到只有登录成员(member)才能查看链接，使用仅对非登录( guest )用户使用 CSS 的条件，将下载链接替换为“抱歉，只有成员(member)才能看到此链接，注册这里”

有什么想法吗？

Answer 1

CSS 是为您的元素添加隐私的糟糕方式，因为在任何情况下都可以通过检查源代码或仅通过禁用 CSS 来查看。

您必须在服务器端隐藏您的链接。

顺便说一下，只是为了完整性，如果你必须将这样的东西用于 CSS 实际有意义的事情，你可以通过向 html 添加一个类来解决它 或 body 如果是未经身份验证的用户，然后有这样的 CSS 规则:

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

请记住，显然任何人都可以根据需要看到该元素。

编辑

您不能使用 CSS 更改文本(除非在伪元素中使用 content 属性，但没关系，因为您将无法更改 href 链接的属性)。因此，要实现您的目标，您需要有两个独立的元素。正如我上面所说，在用户通过身份验证时向您的 html 或 body 添加一个类(这通常是一个好主意)，然后有条件地显示和隐藏您的元素.

所以您的 HTML 看起来像这样:

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

你的 CSS 看起来像这样:

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

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

你可以看一个例子here .在此示例中，我使用 Javascript 来模拟您的登录过程(我在 Javascript 中所做的只是将类添加到 html 元素)。