Взаимодействие :before и :after с элементами 'compact' и 'run-in'
Могут быть следующие ситуации:
- Элемент 'run-in' или 'compact' имеет псевдоэлемент :before типа 'inline':
псевдоэлементы учитываются, если размер бокса элемента вычислен (для 'compact') и выведен внутри того же бокса блока, что и элемент.
- Элемент 'run-in' или 'compact' имеет псевдоэлемент :after типа 'inline':
применяются правила предыдущего пункта. - Элемент 'run-in' или 'compact' имеет псевдоэлемент :before типа 'block':
псевдоэлемент форматируется как блок поверх элемента и не участвует в вычислении размера элемента (для 'compact').
- Элемент 'run-in' или 'compact' имеет псевдоэлемент :after типа 'block':
и элемент, и его псевдоэлемент :after форматируются как боксы блока. Элемент не форматируется как инлайн-бокс в своём собственном псевдоэлементе :after. - Элемент, следующий за элементом 'run-in' или 'compact', имеет :before типа 'block': решение о том, как форматировать элемент 'run-in'/'compact', принимается с учётом результирующего бокса блока из псевдоэлемента :before.
- Элемент, следующий за элементом '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
