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
.
html
, por favorhttp://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