update:
请注意是两端对齐，而不是简单的右侧对齐。

在 排版 - ANT DESIGN 上看到他们有提到冒号对齐的排版规范，如下图所示，请问怎样用CSS实现冒号对齐的效果？

我想到的解决方案如下：
html结构：

 <ul>
<li><div class="title">用户名</div><div class="value">可爱无敌美少女</div></li>
</ul>

css:

 li{
  position: relative;
}
.title{
  position: absolute;
  width: 85px;
  text-align: justify;
  text-align-last: justify;
}
.title:after{
  display: inline-block;
  content: '';
  width: 100%;
  height: 0;
}
.title:before{
  position: absolute;
  left: 85px;
  content: '\FF1A';
}
.value{
  padding-left: 110px;
}

请问有没有可能不限定 title 宽度的条件下，实现冒号对齐，或者有更好的解决方案？