Заполнить точками пустое пространство между словами

ul li, 
ol li { 
  list-style: none; 
} 
 
ol li { 
  display: flex; 
  justify-content: space-between; 
} 
 
li div:nth-child(2) { 
  flex: 1 0; 
  border-bottom: 1px dotted #000; 
  height: 1em; 
  margin: 0 .4em; 
}

<div class="book"> 
  <h1>Оглавление</h1> 
  <ul> 
    <li>Предисловие</li> 
    <li> 
      <ol> 
        <li> 
          <div>Завязка</div> 
          <div></div> 
          <div>стр. 1</div> 
        </li> 
        <li> 
          <div>Кульминация</div> 
          <div></div> 
          <div>стр. 10</div> 
        </li> 
        <li> 
          <div>Развязка</div> 
          <div></div> 
          <div>стр. 100</div> 
        </li> 
      </ol> 
    </li> 
    <li>Послесловие</li> 
    <li>Об авторе</li> 
</div>

.book { 
  width: 250px; 
} 
p { 
    overflow: hidden; 
} 
p:after {  content:'..................................................'; 
  display: block; 
  white-space: nowrap; 
  overflow: hidden; 
} 
p span:first-of-type { 
  float:left; 
  margin-right: 10px; 
} 
p span:last-of-type { 
  float:right; 
  margin-left: 10px; 
} 
 
p:last-of-type{ 
  margin-left: 20px; 
}

<div class="book"> 
  <h1>Оглавление</h1> 
  <p><span>Предисловие</span><span></span></p> 
  <p><span>1. Завязка</span><span>стр. 1</span></p> 
  <p><span>2. Кульминация</span><span>стр. 10</span></p> 
  <p><span>3. Развязка</span><span>стр. 100</span></p> 
  <p><span>Послесловие</span><span></span></p> 
  <p><span>Об авторе</span><span></span></p> 
</div>