Hiding Secret Links With CSS

There's beauty all around, even in the inlined styles of a webpage

Posted June 08, 2020 with tags #css #webdev

Every now and then I like to browse the hiring pages of companies I like and admire.

Last week, I noticed an opening that didn’t feature the usual prominent call-to-action prompt to apply.

Instead of a button or a link, there was only a message with instructions for applicants.

“To apply, submit […] at the URL that appears when you append the class [secret-class] to this tag.”

Alright then. A few clicks in devtools give the paragraph its secret-class. Lo and behold, a URL appears!

“To apply, submit […] at the URL that appears when you append the class [secret-class] to this tag. bit.ly/…”

So what’s the secret sauce that makes this link show up?

A further glance at devtools points to a few inlined styles in the page. Here’s the key excerpt.

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

Let’s break it down.

Once the target paragraph has the necessary class, the CSS selector kicks in. It creates a special ::after pseudo-element that’s placed after all of the paragraph’s content.

The content property used inside the block is a special property that only applies to ::before and ::after pseudo-elements. It replaces them with a provided value. In the case of this job posting, that’s the application link! With a few more properties to make the link pretty, we’ve got a cleverly hidden link!

Why employ a move like this? I could hazard a few guesses.

A hurdle for applicants to prove some level of familiarity with web tools and development (a requirement of the job)
Obscuring the application link encourages applicants to read the complete posting, rather than skimming the page and hitting apply
Dissuade third parties (web crawlers, recruiters) from finding and sharing the application link

At the end of the day though, I’m just hypothesising.

My concern with this approach is its accessibility. It’s hard to be certain that CSS content will be visible to those using assistive technologies, especially screen readers.

This could even be seen as discriminatory, preventing a particular audience from applying for the job. In the case of sufficiently inaccessible content, adding an aria-label can make a world of difference. Even with this label, the link itself remains visually hidden!

As an extra step, you can share the link between the aria-label and its paragraph using the attr() CSS function!

You can see it in action here.

Click the above button to show the message!

<button onclick="toggleClass()">Toggle message</button>
<p aria-label="Your special message appears here" id="target">
    Click the above button to show the message!&nbsp;
</p>

<style>
    .show-text::after {
        content: attr(aria-label);
        color: var(--theme-color);
        background-color: var(--theme-text-color);
        font-weight: 700;
    }
</style>

<script>
    function toggleClass() {
        const target = document.getElementById("target");
        if (target.className) {
            target.className = "";
        } else {
            target.className = "show-text";
        }
    }
</script>