使用 CSS 隐藏秘密链接

我偶尔会浏览一下我喜欢和欣赏的公司的招聘页面。

上周，我注意到一个招聘启事，其中没有像往常那样醒目地发出“申请”的号召性用语。

没有按钮或链接，只有一条给申请人的说明信息。

“要申请，请通过将此标签附加类 [ ] 后出现的 URL 提交 [...] secret-class。”

好的。在开发者工具中点击几下，就能给段落添加属性secret-class。瞧，一个网址出现了！

“要申请，请通过将此标签的类名 [ ] 添加到此处后显示的 URL 提交 [...] secret-class。bit.ly/... ”

那么，让这个链接显示的秘诀是什么呢？

进一步查看开发者工具，发现页面中存在一些内联样式。以下是关键摘录。

.secret-class::after {
    content: " bit.ly/...";
    color: #6ba53a;
    font-weight: 600;
}

让我们来详细分析一下。

一旦目标段落拥有了必要的类，CSS 选择器就会生效。它会创建一个特殊的::after伪元素，并将其放置在段落所有内容之后。

代码块中使用的属性是一个特殊属性，它仅适用于 ` <div> content`::before和::after伪元素。它会将伪元素替换为提供的值。在本招聘信息中，这个值就是申请链接！再添加一些属性美化链接，我们就得到了一个巧妙隐藏的链接！

为什么要采取这样的策略？我大概能猜到几点。

• 申请人需要证明自己对网络工具和开发有一定的熟悉程度（这是该职位的一项要求）。
• 隐藏申请链接可以鼓励申请人阅读完整的招聘信息，而不是快速浏览页面后就点击“申请”。
• 阻止第三方（网络爬虫、招聘人员）查找和分享申请链接

但归根结底，我只是在做假设。

我对这种方法的担忧在于其可访问性。很难确定content使用辅助技术（尤其是屏幕阅读器）的用户是否能够看到 CSS 代码。

这甚至可能被视为歧视，阻止特定群体申请职位。对于访问难度较大的内容，添加一个标签aria-label就能起到至关重要的作用。即使有了这个标签，链接本身在视觉上仍然是隐藏的！

此外，您还可以使用CSS 函数aria-label分享元素及其段落之间的链接！attr()

你可以在这个 CodePen 中看到它的实际效果！