Rulisp Rulisp - 5 months ago 7
HTML Question

Fill the rest of the element with text content

I want to fill the rest of the element with dots. This is a characteristics list. Left is name of characteristic and right is its value.
You can see what I want to achieve in this picture.

The width of the container is not known beforehand.

enter image description here

The markup will be looking something like this

<div class="characteristics_table">
<div class="col-md-8">Name </div>
<div class="col-md-4">Value </div>
</div>


Is it possible to make it with pure CSS or I should use JS?

Answer

Here is your answer in codepen It can be done using css

http://codepen.io/SESN/pen/pbboMw

HTML

<div class="container-fluid">
  <div class="row">
  <div class="characteristics_table">
    <div class="col-md-8">Name  </div>
    <div class="col-md-4">Value  </div>

    <div class="dot col-md-8">
      <span>Demo 1 </span>
      <div></div>
    </div>
    <div class="valDiv col-md-4">Demo Demo   </div>

    <div class="dot col-md-8">
      <span>Demo 1 </span>
      <div></div>
    </div>
    <div class="valDiv col-md-4">Demo Demo   </div>
</div>
  </div>
</div>

CSS

.dot { position: relative; }
.dot > span { background: white; position: relative: z-index: 1; padding-right: 5px; }
.dot > div { position: absolute; width: 100%; border: 1px dashed; margin-top: -10px; z-index: -1; }
.valDiv { padding-left: 25px;}
Comments