dot width index 100%

Question

In CSS you can do an index equal to Word by picking 100% of the container width and using dots to separate the "title" from the "page number"?

Type:

• Introduction - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -20
• Goals - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -20
• Methodology - - - - - - - - - - - - - - - - - - - - - - - - - 20

Answer 1

If you don’t have textures or background images, a very "cheap" way to do it is to make the entire line dotted, and "cover" with the background of the end elements (the name and number).

The advantage in this case is the simplicity of the code:

li span { background: #fff }
li span+span { float: right }
li { position: relative }
li::before {
  content: "";
  display: block; position: absolute; z-index: -1;
  top: 50%; width: 100%;
  border-bottom: 1px dashed blue;
}

<h1>Índice</h1>
<ul>
  <li><span>Introdução</span> <span>20</span></li>
  <li><span>Metas</span> <span>20</span></li>
  <li><span>Metodologia</span> <span>20</span></li>
</ul>

Basically what happens here is that the background of spans is painted white (obviously has to adapt to the color of the page), effectively hiding the traces.

The z-index serves to ensure that the line is hidden by the bottom of the written part.

Styling a little better:

See one more example, this time giving an extra space between the line and the background, and doing with dotting:

li span { background: #fff; padding: 0 12px 0 0 }
li span+span { float: right; padding: 0 0 0 12px }
li { position: relative }
li::before {
  content: "";
  display: block; position: absolute; z-index: -1;
  top: 67%; width: 100%;
  border-bottom: 2px dotted #000;
}

<h1>Índice</h1>
<ul>
  <li><span>Introdução</span> <span>20</span></li>
  <li><span>Metas</span> <span>20</span></li>
  <li><span>Metodologia</span> <span>20</span></li>
</ul>

In case I used 2px in the border-bottom, and dotted (which is the dotted) in place of the dashed of the first example. The space in the white parts is defined by the padding. The position of the line was defined in top.

Answer 2

The problematic of this is similar to players who need space for buttons, the "timeline" being the same thing as the dots. Flex already has a good support. If you want to learn more about flex, I recommend the course of Wes Bos, is completely free, but in English :)

.teste {
  max-width:100%;
}
.teste li {
  overflow:hidden;
  display:flex;
}
.teste li span {
  white-space: nowrap;
}
.teste li div {
}
.teste li div:before {
  content:'------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------';
  white-space: nowrap;
}
.teste > a {
  display:flex;
  text-decoration:none;
}


/* extra para demonstração */
main {
  width:100%;
}
main > section {
  width:75%;
  float:left;
}
main > aside {
  float:left;
  width:20%;
  margin-left:5%;
  background:#e7e7e7;
  min-width:100px;
}

<main>
<section>
  <h1>Indice</h1>
  <!-- Começa aqui -->
  <ul class="teste">
    <a href="#">
      <li>
        <span>Introdução </span>
        <div></div>
      </li>
      <div>20</div>
    </a>
    <a href="#">
      <li>
        <span>Metas</span>
        <div></div>
      </li>
      <div>20</div>
    </a>
    <a href="#">
      <li>
        <span>Metodologia</span>
        <div></div>
      </li>
      <div>20</div>
    </a>
  </ul>
  <!-- Termina Aqui -->
</section>
<aside>
  <p>blablabla<br>
  blablabla<br>
  blablabla<br>
  blablabla<br>
  blablabla<br>
  blablabla<br>
  blablabla
  </p>
</aside>
</main>