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?

Answer 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

Answer 2

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.