Cписок содержания, аналогичный книжному

Для этого мы создали маркированный список, задали ему class="list".
Для каждого элемента списка было использовано фоновое изображение в виде точки, которое повторяется по оси x и прижато к нижней части элемента.

background: url(dot.gif) repeat-x bottom;

Внутри каждого элемента были помещены теги span и em.

Опишем для них css:

.list span{position: absolute;left: 0;bottom: -3px;display: block;background: #fff;padding-right: 5px;} 
.list em{position: absolute;right: 0;bottom: -3px;display: block;text-align: right;background: #fff;padding-left: 5px;font-style: normal;}

Из css видно, что для span и em было задано абсолютное позиционирование и белый фон, который должен перекрывать фоновое изображение родительского элемента (.list li). Перекрытие осуществляется за счет смещения элементов span и em вниз на 3 пиксела.
Не стоит забывать, что .list li должен иметь свойство position: relative;
Элемент em по умолчанию имеет наклонный стиль шрифта (italic), который мы заменяем на обычный (normal).

Отступы у данных элементов в 5px носят декоративный характер.
Подобнее разобраться в технике вы сможете, посмотрев рабочий пример.