Оглавление (содержании книги) на CSS

Делаем на CSS оглавление или содержание книги.

Для примера, вот такое демо с фрагментом из оглавления книги:

HTML-структура данного содержания выглядит следующим образом:

<div class="table-of-contents">
	<div>
		<div>Содержание</div>
		<div>Страница</div>
	</div>
	<ol>
		<li>
			<div>Никогда не разговаривайте с неизвестными</div>
			<div></div>
			<div>1</div>
		</li>
		<li>
			<div>Понтий Пилат</div>
			<div></div>
			<div>3</div>
		</li>
		<!-- Еще пункты оглавления -->
	</ol>
</div>

Чтобы не растягивать код, я удалил из него часть заголовков, оставив на их месте комментарий. Все они сделаны в такой структуре из трёх дивов внутри тэга li:

<li>
	<div>Название заголовка/главы</div>
	<div></div>
	<div>Число с номером страницы</div>
</li>

Пустой div по середине - это точки ведущие от заголовка к номеру страницы.

Нумерация глав реализована за счёт того, что применяется HTML-тэг <ol></ol>, который является нумерованным списком.

CSS стили:

html[data-theme="dark"] {
    --table-of-contents-bg: #22272e;
    --table-of-contents-dots-brd-color: #5c5c5c;
}

.table-of-contents > div {
    position: sticky;
    top: 0;
    display:flex;
    justify-content: space-between;
    padding-top: 15px;
    padding-bottom: 15px;
    font-weight: 700;
    background-color: var(--table-of-contents-bg, #fff);
    font-size: 21px;
}
.table-of-contents > ul,
.table-of-contents > ol {
    margin: 0;
    font-size: 19px;
}
.table-of-contents > ul {
    padding-inline-start: 0;
}
.table-of-contents > ol {
    padding-inline-start: 24px;
}
.table-of-contents li {
    display: flex;
    justify-content: space-between;
}
.table-of-contents ol li div:first-child {
    display: list-item;
}
.table-of-contents li div:nth-child(2) {
    flex: 1 0;
    border-bottom: 2px dotted var(--table-of-contents-dots-brd-color, #d0d7de);
    height: 1em;
    margin: 0 .4em;
}

Управление списком

В демо-примере была обычная нумерация арабскими цифрами, начинающаяся с единицы. Такая нумерация и сортировка применяется по умолчанию для тэга <ol></ol>.

Для расширенного управления списками, для тэга ol применяются следующие атрибуты:

• start - Начало нумерации начинается с указанного числа или символа с порядковым номером. Значение - целое число. Пример: start="4" начнёт отчёт с числа 4 или буквы d для буквенного типа нумерации.
• reversed - Атрибут логического значения (bool), указывающий что элементы списка пронумерованы в обратном порядке от большего к меньшему.
• type - Задаёт тип нумерации. Атрибут type может иметь следующие значения:
  • a - нумерация строчными латинскими буквами в алфавитном порядке;
  • A - нумерация заглавными латинскими буквами;
  • i - нумерация строчными римскими символами;
  • I - нумерация заглавными римскими символами;
  • 1 - числовая нумерация (по умолчанию). Данный тип используется для всего списка, если только не указан любой другой атрибут type в элементе <li>.