Dot leader

<div class="container">
<!-- Left side -->
<div>...</div>
<!-- Dots -->
<div class="container__dots"></div>
<!-- Right side -->
<div>...</div>
</div>
.container {
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
}
.container__dots {
/* Bottom border */
border-bottom: 1px dotted rgba(0, 0, 0, 0.3);
/* Take remaining width */
flex: 1;
/* Spacing */
margin: 0px 4px;
}

Use cases

Chapter 1
5
Chapter 2
40
Egg
3$
Coffee
5$

See also

Menu

Property list

Split navigation