JSFiddle - React, Tailwind, and code Playground

HTML

<div id="mail"></div>

  <hr>

<mail data-user="info" data-domain="tweakers.net"></mail>

  <hr>
 
 <a class="mail">ten.srekaewt@ofni</a>

CSS

#mail:after {
  content: '[email protected]';
}

mail:after {
  content: attr(data-domain);
}

mail:before {
  content: attr(data-user) "\0040";
}

a.mail {
    unicode-bidi: bidi-override;
    direction: rtl;
  }