In CSS, how can I make an index equal to Word taking 100% of the width of the container and using dots to separate the "title" from the "page number"?
Type:
The problem of this is similar to that of players who need room for buttons, the "timeline" being the same as the dots. Flex already has good support. If you want to learn more about flex, I recommend Wes Bos course, it's totally 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>
If you do not have background textures or images, a very "cheap" way to do it is to leave the entire line dotted, and "top" with the bottom of the stylus elements (name and number).
The advantage here 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 the 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.
See another example, this time giving extra space between the line and the background, and doing with dotted:
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 this case, I used 2px in border-bottom , and dotted (which is the dotted) instead of dashed of the first example. The space in the white parts is defined by padding . Line position was set to top .