Can you align text by a symbol in it?

Question

I want to display a list of email addresses like this:

                        a@domain1.com
                      asd@domain1.com
                 dsasadsd@domain2.com
                       gg@domain2.com
                       cc@g.com
hinxterpexterpoxterfinter@e.com
                        j@foxyfarmfetched.com

So, first sorted by domain, then by account, and all aligned by the @ sign. The sorting part is trivial, but how do I get the addresses to line up like that?

I tried making a <table> and putting the parts in different cells, but the result was that when copy-pasting them there was an extra TAB character:

a    @domain1.com
asd    @domain1.com
dsasadsd    @domain2.com
gg    @domain2.com
cc    @g.com
hinxterpexterpoxterfinter    @e.com
j    @foxyfarmfetched.com

Not cool. And for bonus points, it would be nice to make each email address a clickable mailto: link as well, which is impossible if the address is split into two cells.

Is there any other way to achieve this effect, or am I out of luck? I'm fairly proficient at HTML/CSS, but in this case nothing comes to mind.

Answer 1

You can also achieve by css position property something like below.
Tested copy/paste on Chrome, FF & EDGE working fine also mailto: link as well.

.links{
  width: 100%;
  max-width: 1000px;
  display: block;
  margin: 0 auto;
  background-color: #f9f9f9;
  text-align: center;
  padding: 10px;
  box-sizing: border-box;
  font-family: Arial;
  font-size: 15px;
}
a{
  display: table;
  white-space: nowrap;
  text-align: center;
  position: relative;
  padding: 4px;
  margin: 0 auto;
}
a span{
  position: absolute;
}
a span:nth-child(1){
  right: 50%;
  margin-right: 9px;
}
a span:nth-child(2){
  left: 50%;
  margin-left: 9px;
}

<div class="links">
 <a href="mailto:a@domain1.com"><span>a</span>@<span>domain1.com</span></a>
 <a href="mailto:asd@domain1.com"><span>asd</span>@<span>domain1.com</span></a>
 <a href="mailto:lucknow@domain2.com"><span>lucknow</span>@<span>domain2.com</span></a>
 <a href="mailto:gg@domain2.com"><span>gg</span>@<span>domain2.com</span></a>
 <a href="mailto:cc@lorem.com"><span>cc</span>@<span>lorem.com</span></a>
 <a href="mailto:loremispsomdolor@"><span>loremispsomdolor</span>@<span>test.com</span></a>
 <a href="mailto:nameofmail@nameofdomain.co.in"><span>nameofmail</span>@<span>nameofdomain.co.in</span></a>
 <a href="mailto:good@hello.in"><span>good</span>@<span>hello.in</span></a>
</div>

Answer 2

You can try something like below. It should work fine for the copy/paste and the link too:

a {
 display:table-row;
}
a span {
  display:table-cell;
  text-align:right;
}

<a href="mailto:a@domain1.com"><span>a@</span>domain1.com</a>
<a href="mailto:asd@domain1.com"><span>asd@</span>domain1.com</a>
<a href="mailto:dsasadsd@domain2.com"><span>dsasadsd@</span>domain2.com</a>
<a href="mailto:gg@domain2.com"><span>gg@</span>domain2.com</a>
<a href="mailto:cc@g.com"><span>cc@</span>g.com</a>
<a href="mailto:hinxterpexterpoxterfinter@e.com"><span>hinxterpexterpoxterfinter@</span>e.com</a>
<a href="mailto:j@foxyfarmfetched.com"><span>j@</span>foxyfarmfetched.com</a>