7

No CSS tem como fazer um índice igual o do Word pegando 100% da largura do contêiner e usando pontinhos para separar o "título" do "número da página"?

Tipo:

  • Introdução - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -20
  • Metas - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -20
  • Metodologia - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -20
3
  • Poste o seu html, por favor 14/11/2016 às 13:28
  • Fonte: http://stackoverflow.com/questions/1746491/how-to-draw-a-dotted-line-with-css(obs; substitua dotted por dashed) Outra Fonte: http://www.sovavsiti.cz/css/hr.html
    – fsi
    14/11/2016 às 13:36
  • Pergunta bem parecida com a sua stackoverflow.com/questions/3097851/…
    – Marconi
    14/11/2016 às 13:43

2 Respostas 2

5

Se não tiver texturas ou imagens de fundo, um jeito bem "barato" de fazer é deixar a linha inteira pontilhada, e "tampar" com o fundo dos elementos das pontas (o nome e o número).

A vantagem neste caso é a simplicidade do código:

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>

Basicamente o que acontece aqui é que o fundo dos spans é pintado de branco (obviamente tem que adaptar à cor da página), efetivamente escondendo os traços.

O z-index serve para garantir que a linha fique escondida pelo fundo da parte escrita.


Estilizando um pouco melhor:

Veja mais um exemplo, desta vez dando um espaço extra entre a linha e o fundo, e fazendo com pontilhado:

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>

No caso, usei 2px no border-bottom, e dotted (que é o pontilhado) no lugar do dashed do primeiro exemplo. O espaço nas partes brancas é definido pelo padding. A posição da linha foi definida no top.

1

A problemática disso é semelhante à de players que precisam de espaço para botões, sendo a "linha do tempo" a mesma coisa que os pontinhos. Flex já possui um bom suporte. Se quiser aprender mais sobre flex, eu recomendo o curso do Wes Bos, é totalmente gratuito, mas em inglês :)

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .