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 in this CodePen!
Top comments (7)
I'm glad you found this cool I appreciate the idea, but that's awful, did you know that pseudo elements content is not read by screen readers across the board? and so this is discrimination against partially sighted developers and against quite a few employment laws depending on the country (this is also the answer you give to get the job).
Also it could have been achieved by just hiding a span within that text in an accessible way.
Yep, I don't think this is a good means of challenging potential applicants given it doesn't lend itself to users who depend on assistive tools. I wouldn't ship it.
It seems to me like the goal was to hide the link well away from the content itself (hence using an inlined stylesheet rather than a span inside/near the paragraph), which this achieves at the aforementioned cost.
I think it's an interesting use of CSS that's worth a quick investigation, even if it isn't useful in practice.
No worries, even bad things can have useful outcomes, somebody might find it useful. I like this one, the letter
ecan be submitted in html input of type number and e can be used in CSS like thisborder-radius: 9e9em. Oh the stuff we can do 😅PPS, you mention the aria-label, here's a neat trick.
TIL, neat! That's a great way of sharing the label's value!
Interesting find, thank you for sharing. But more importantly thank you for your inclusion mindfulness! ❤
That being said I could see adding secret tools to my app for easier prod support (known small group of users for internal, non-web facing, app... very low risk)