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@doma         


        

Answer 1

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>

Answer 2

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>