before & after

[DrStrangeLove]

Набрёл на этот пример из итогов конкурса. Хотелось бы понять как он работает?? Что является координатной сеткой для элементов созданных через :before и :after??

[Softlink]

Попробую взять на себя смелость объяснить.

div {
    background: #f0f0f0;
    margin: 20px;
    position: relative;
    border: 1px solid #000;
    padding: 11px;
}
div::before {
    position: absolute;
    top: -16px;
    bottom: -16px;
    right: -1px;
    left: -1px;
    content: "";
    border: solid #000;
    border-width: 0 1px;
    z-index: -1;
    background:red;
}
div::after {
    position: absolute;
    top: -1px;
    bottom: -1px;
    right: -16px;
    left: -16px;
    content: "";
    border: solid #000;
    border-width: 1px 0;
    z-index: -1;
    background:blue;
}

с самим родителем, думаю все понятно. Вопрос к псевдоэлементам.

Они привязываются к основному диву. Далее rash позиционирует эти псевдоэлементы абсолютом, при этом задавая им бордеры. Для того, чтобы они были визуально "под" родителем, он ставит отрицательный z-index.

При этом он растягивает каждый ПЭ отрицательными значениями.

Итого. Ставим родитель, ему задаем релатив, затем вешаем к нему ПЭ, отрицательными значениями растягиваем их относительно родителя в высоту и ширину. Здесь ::after тянет по ширине, а ::before по высоте. Благодаря тому, что они реально больше родителя, их бордеры отступают от него на 16px сбоку и сверху.

Может сумбур, но я вроде бы правильно понял как это работает.

p.s.попробуйте поиграться с ПЭ. Задайте, например, им фон.

[DrStrangeLove]

Попробую взять на себя смелость объяснить.

div {
    background: #f0f0f0;
    margin: 20px;
    position: relative;
    border: 1px solid #000;
    padding: 11px;
}
div::before {
    position: absolute;
    top: -16px;
    bottom: -16px;
    right: -1px;
    left: -1px;
    content: "";
    border: solid #000;
    border-width: 0 1px;
    z-index: -1;
    background:red;
}
div::after {
    position: absolute;
    top: -1px;
    bottom: -1px;
    right: -16px;
    left: -16px;
    content: "";
    border: solid #000;
    border-width: 1px 0;
    z-index: -1;
    background:blue;
}

с самим родителем, думаю все понятно. Вопрос к псевдоэлементам.

Они привязываются к основному диву. Далее rash позиционирует эти псевдоэлементы абсолютом, при этом задавая им бордеры. Для того, чтобы они были визуально "под" родителем, он ставит отрицательный z-index.

При этом он растягивает каждый ПЭ отрицательными значениями.

Итого. Ставим родитель, ему задаем релатив, затем вешаем к нему ПЭ, отрицательными значениями растягиваем их относительно родителя в высоту и ширину. Здесь ::after тянет по ширине, а ::before по высоте. Благодаря тому, что они реально больше родителя, их бордеры отступают от него на 16px сбоку и сверху.

Может сумбур, но я вроде бы правильно понял как это работает.

p.s.попробуйте поиграться с ПЭ. Задайте, например, им фон.

т.е. родителем для псевдоэлементов является тот div(элемент) к которому они привязаны?? родитель не body (в этом примере) ??

Edited July 11, 2011 by DrStrangeLove

[amelice]

т.е. родителем для псевдоэлементов является тот div(элемент) к которому они привязаны?? родитель не body (в этом примере) ??

в данном примере родитель - <div>.

Я тоже попыталась выяснить. И привожу свою додумку.

Генерируемое содержимое прикрепляется к content-box'у(содержимому) блока. То есть паддинг не в счет. В данном примере с помощъю абсолютного позиционирования отсчет начинается за бордером блока. а если убрать right:-1,left:-1,top:-1,bottom:-1 то отсчет начинается с паддинга элемента.

Так есть ли на самом деле?

Edited July 11, 2011 by cheburek

[Svatov]

Если рассматривать псевдоэлементы в контексте данного примера, то по моему мнению они позволяют просто уменьшить количество элементов в HTML-коде (как видим используется лишь один элемент <div>). Суть вся кроется в позиционировании с помощью которого сформировали блоки с необходимыми границами. Привязав псевдоэлементы к диву, rash вытянул из потока и сформировал с помощью позиционирования position:absolute и свойств left,right,top,bottom "псевдоблок" подходящий под условия задачи...у которого видимы лишь границы необходимые для построения линий, сначала вертикальные границы и затем горизонтальные...z-index -1 прячет эти линии за основной блок, поскольку они накладываются на основной блок...если поменять координаты left, right на несколько единиц при положительном z-index будет понятно для чего это сделано...это мое понимание этого примера, после экспериментирования над ним.

Edited July 12, 2011 by Svatov

[SelenIT]

В первом грубом приближении, :before и :after равносильны вставленным соответственно в начало и конец элемента span-ам с содержимым, указанным в св-ве content. Только в DOM они не встраиваются.