How to create a clickable, visible but obfuscated mailto:// link - css

Question

I know there's already a lot about email obfuscation on this site. But recently I found this neat little CSS-trick that I hadn't encountered before.
It SHOWS the email address (here: user#domain.com), but sadly it doesn't produce a clickable mailto:// link. If one entered it as a href, of course the address would again be ready for bots to be picked up.
So I added a litte javascript routine, that adds an event listener to all .e-mail elements:
// Email de-obfuscation, start mail client, copy email to clipboard:
document.querySelectorAll('.e-mail').forEach(e => {
// get the encoded email address from ::after and decode:
function getDecodeEmail(event) {
z=event.currentTarget;
y=getComputedStyle(z,'::after');
x=y.getPropertyValue('content');
// reverse string rtl
v=x.split("").reverse().join("");
// remove all "
return v.replace(/['"]+/g, '');
};
// onClick start mail client with decoded email address:
e.addEventListener("click", event => {
// prevent href=#
event.preventDefault();
// get the (reversed) email address of the calling anchor
v=getDecodeEmail(event);
//window.location.href="mailto:"+v;
// former statement doesn't fire in SE code snippets,
// but you can try here: https://jsfiddle.net/jamacoe/Lp4bvn13/75/
// for now, let's just display the link:
alert("mailto:"+v);
});
// right mouse click copies email to clipboard:
e.addEventListener("contextmenu", event => {
// prevent href=#
event.preventDefault();
// get the (reversed) email address of the calling anchor
v=getDecodeEmail(event);
// copy v to clipboard
navigator.clipboard.writeText(v);
// just to check:
navigator.clipboard.readText().then( clipText => alert(clipText) );
// former statements don't work in SE code snippets,
// but you can try here: https://jsfiddle.net/jamacoe/Lp4bvn13/75/
});
});
.e-mail::after {
content: attr(data-mailSvr) "\0040" attr(data-mailUsr);
unicode-bidi: bidi-override;
direction: rtl;
}
<a class=e-mail data-mailUsr=resu data-mailSvr=moc.niamod href=""></a>
On the one hand side I'm very content with this solution. But on the other hand, I think my javascript spoils the elegance and simplicity of the HTML/CSS. Does anybody have an idea how to complement this approach of email obfuscation, only using pure CSS + HTML, resulting in a clickable and visable link that meets all common requirements (i.e. screen reader compatible, sufficiently obfuscated, correctly formatted, right clickable for copying)?

Answer 1

I have done something similar in the past. I needed a way to display my email address on one of my websites, but not get horribly spammed in the process. I implemented this 2 years ago, and I haven't received any spam. I didn't do this with CSS though... this is pure JS.
If you hover over the result, you'll see that it creates a clickable email address.
Hope this helps.
let fname = "first";
let lname = "last";
let domain = "gmail.com";
email.innerHTML = `${fname}.${lname}#${domain}`;
<span id="email"></span>