Спецификация HTML 4.01 + Спецификация CSS2

         

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



Содержание раздела