Содержание книги

Содержание книги в виде списка, с левой стороны нумерация пунктов, с правой стороны номер страницы. Стороны разделяет точечный пунктир.

Результат:

Оглавление как в книге в виде списка
Оглавление как в книге

Код HTML простой список ol li, в котором строка span оглавление, тег b применяется для номера страницы.

<h1>Содержание</h1>
<ol>
  <li><span>Звуки и буквы</span><b>5</b></li>
  <li><span>Слог</span><b>20</b>
    <ol>
      <li><span>Открытый слог</span><b>45</b></li>
      <li><span>Закрытый слог</span><b>46</b>
        <ol>
          <li><span>Гласный звук</span><b>47</b></li>
          <li><span>Согласный звук</span><b>48</b></li>
        </ol>
       </li>
      <li><span>Ударение</span><b>49</b></li>
    </ol>
  <li><span>Орфоэпия</span><b>51</b></li>
  <li><span>Орфография</span><b>72</b></li>
</ol>

В CSS применяются псевдоэлементы ::after и ::before. Свойство content для элементов вставляет содержание. Символ § как знак параграфа, на клавиатуре Windows вводится сочетанием клавиш ALT+0167 (§), мнемоника &sect.

ol::before {
	content: '';
	border-bottom: 0;
}
ol {
	counter-reset: section;
	list-style-type: none;
}
ol li {
	vertical-align: bottom;
	text-align: left;
	overflow: hidden;
	position: relative;
}
ol li > span::after {
	content: '';
	position: absolute;
	top: 18px;
	width: 100%;
	height: 0px;
	margin-left: 5px;
	border-bottom: 2px dotted grey;
}
ol li::before {
	counter-increment: section;
	content: " § " counters(section, ".") " ";
}
ol li > b {
	position: absolute;
	right: 0;
	background: white;
	padding-left: .5em;
}

Пример Оглавления как в книге работает во всех современных браузерах и IE9+. Поддержка браузерами функции leader() для свойства content в далеком будущем.

Еще примеры «Оглавление как в книге» на страницах «Web Style Sheets CSS tips & tricks» и «Cascadica».