Генерируемое содержимое, автоматическая нумерация и списки

Взаимодействие :before и :after с элементами 'compact' и 'run-in'

Могут быть следующие ситуации:

1. Элемент 'run-in' или 'compact' имеет псевдоэлемент :before типа 'inline': псевдоэлементы учитываются, если размер бокса элемента вычислен (для 'compact' ) и выведен внутри того же бокса блока, что и элемент.
2. Элемент 'run-in' или 'compact' имеет псевдоэлемент :after типа 'inline': применяются правила предыдущего пункта.
3. Элемент 'run-in' или 'compact' имеет псевдоэлемент :before типа 'block': псевдоэлемент форматируется как блок поверх элемента и не участвует в вычислении размера элемента (для 'compact' ).
4. Элемент 'run-in' или 'compact' имеет псевдоэлемент :after типа 'block': и элемент, и его псевдоэлемент :after форматируются как боксы блока. Элемент не форматируется как инлайн-бокс в своём собственном псевдоэлементе :after.
5. Элемент, следующий за элементом 'run-in' или 'compact', имеет :before типа 'block': решение о том, как форматировать элемент 'run-in' / 'compact', принимается с учётом результирующего бокса блока из псевдоэлемента :before.
6. Элемент, следующий за элементом 'run-in' или 'compact', имеет :before типа 'inline': решение о том, как форматировать элемент 'run-in' / 'compact', зависит от значения 'display' элемента, к которому присоединён :before.

Это заголовок 'run-in' с псевдоэлементом :after, после которого идёт параграф с псевдоэлементом :before. В этом примере все псевдоэлементы являются инлайн (по умолчанию).

Когда таблица стилей:

H3 { display: run-in }
H3:after { content: ": " }
P:before { content: "... " }

применяется к такому документу-источнику:

<H3>Centaurs</H3>
<P>have hoofs
<P>have a tail

визуальное форматирование будет таким:

Centaurs: ... have hoofs
... have a tail