在 html/css 中用破折号填充

Question

我的网站上有一个用户管理块，我正在尝试在那里显示一些信息。
我认为没有什么比图片的例子更好的了。
这就是方块现在的样子：

这就是我希望块的样子：

有什么好的方法吗？我手动添加了这些破折号，这不是我想要的方式，我希望它具有响应性。

这里是块代码：

<div class="account-box">
	Welcome, guess. <br>
	<hr>
	Coins: <span style="float: right;">0</span> <br>
	Points: <span style="float: right;">0</span> <br>
	Total Referrals: <span style="float: right;">0</span> <br>
	<hr>
	Logged as [username] <span style="text-align: right;"><a href="/logout" class="btn btn-xs btn-danger"><span class="fa fa-sign-out fa-fw"></span>Logout</a></span>
</div>

Answer 1

我最近不得不做类似的事情。这是我想出的：

.entry {
  display: flex;
  align-items: center;
}
.entry>.spacer {
  flex-grow: 1;
  border-bottom: 1px dashed currentColor;
  margin: 4px;
}

<div class="entry">
  Label:
  <ins class="spacer"></ins>
  123
</div>

根据需要调整！