Hide email address from bots using pseudo elements?

Question

Pseudo elements are not part of the DOM. They can't be targeted by javascript, and they are visible to the user.

If I wanted to implement a site with my email address (or any other information I did not want to be automatically scraped), but didn't want it to be visible to robots, could I not simply do:

<style>
.email-point::after {
    content: "cris@domain.com"
}
</style>
<span class="email-point">Email:</span>

To me this is a quite spooky and foolproof way to hide content from robots. How does it fail?

score 1 · Answer 1 · answered Mar 16 '13 at 13:49

1

The user can't click on the email address as a link to email you. If that's acceptable to you then the solution should work fine.

answered Mar 16 '13 at 13:49

Richard Brown

11,346
4
32
43

score 1 · Accepted Answer · answered Mar 16 '13 at 13:50

1

I think robots might scan the css too, and find the email via a regex, so what you might try is to spilt the email in parts eg

<span class="cris email">@</span>

.cris.email::before{
    content: "cris"
}
.email::after {
    content: "domain.com"
}

but be aware this is an UX-sin as the end user wont be able to copy the adress and will be forced to type it up

answered Mar 16 '13 at 13:50

Valerij

27,090
1
26
42

True. It reduces usefulness since the reader has to type it. But if it were not an email address, but say an article you wanted to not get scraped...maybe that would work. – Cris Stringfellow Mar 16 '13 at 13:51
you might want to add javascript to lead the user to `mailto:...` on click of `span.email` but then you would need to get the address in your js eg via fetching from css or encode it once more – Valerij Mar 16 '13 at 13:53

Hide email address from bots using pseudo elements?

2 Answers2