12.3. Взаимодействие :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