Question 125039 in CSS Question posted in
Some basic documentation can be found here.

Css – Connect data using dotted line

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.

Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0 
    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search