Connect data using dotted line

Question

Current output:

data1..............          10
data200..............      3000

Expected output:

data1........................10
data200....................3000

Rite now, I am hardcoding the connecting dotted lines.

code:

<div>
   <a data-target=".lev1"> DisplayData</a>
   <p class ="collapse">data1.............. 
       <span class="RightAlign"> '  10  '</span>
   </p>
   <p class ="collapse">data200..............
       <span class="RightAlign">'  3000  '</span>
   </p>
 </div>

css:

.RightAlign {
    float: right;
    margin-right: 20px;
    margin-left: 10px;
  }

I would appreciate if anyone can give an idea of how I can achieve the expected output. Thank you.

this should be able to help. https://css-tricks.com/a-perfect-table-of-contents-with-html-css/ — dantheman, May 03 '23 at 10:13

score 2 · Accepted Answer · answered May 03 '23 at 10:32

p {
  display: flex;
  align-items: flex-end;
}

p:after {
  content: '';
  flex: auto;
  min-width: 24px;
  margin: 0 6px;
  height: 2px;
  margin-bottom: 4px;
  background-image: linear-gradient(to right,currentColor 2px,transparent 2px, transparent 4px);
  background-size: 4px 2px;
}

span {
  flex: none;
}

span:last-child {
  order: 1;
  text-align: right;
}

<p><span>Lorem</span><span>Ipsum</span></p>
<p><span>Dolor</span><span>Sit</span></p>

score -3 · Answer 2 · answered May 03 '23 at 10:21

I don't have idea about dotted line but you can fix spacing like:

.data-label {
display: inline-block;
text-align: left;
width: 150px;
}

.data-value {
display: inline-block;
text-align: right;
width: 50px;
margin-left: 10px;
}

<div>
   <a data-target=".lev1"> DisplayData</a>
   <p class ="collapse"><span class="data-label">data1</span>
       <span class="data-value">10</span>
   </p>
   <p class ="collapse"><span class="data-label">data200</span>
       <span class="data-value">3000</span>
   </p>
 </div>

Connect data using dotted line

2 Answers2