Padding with dashes in html/css

Question

I have a user managment block on my website and I'm trying to display a bit information there.
I think that nothing is better than example with pictures.
This is how the block looks now:

And this is how I want the block to look like:

Is there any good way to do that? I added those dashes manually, and this is not the way I'm looking for, I want it responsive.

Here is the block code:

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

Possible duplicate of http://stackoverflow.com/questions/4898287/how-to-display-text-a-dotted-line-then-more-text-spanning-the-width-of-the-page/28629080#28629080 (although that one is about dots instead of dashes, the approaches will 99% be the same). — Harry, Jan 22 '17 at 16:37

score 2 · Answer 1 · answered Jan 22 '17 at 16:39

2

I recently had to do something similar. Here's what I came up with:

.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>

Adjust as needed!

answered Jan 22 '17 at 16:39

Niet the Dark Absol

320,036
81
464
592

It works fine! thank you. What do I need to do for streching the dashes for the whole line, until the other side? because it stops after few dashes. – guyshitz Jan 22 '17 at 17:00
@guyshitz Make sure the container spans the full width of the parent element, perhaps? – Niet the Dark Absol Jan 22 '17 at 19:12

Padding with dashes in html/css

1 Answers1