Замечательные псевдо-классы, которые позволяют добавить виртуальные контейнеры в начало или конец контейнера. Как они работают и почему могут «не сработать»?
Условия для работы after и before
Псевдоклассы применимы к любым парным контейнерам, т.е. тегам которые могут «обернуть» какой то контент, имеют открывающийся и закрывающийся теги. К примеру, с <img> они не работают, а со <span></span> — пожалуйста.
Вторым важным требованием для «срабатывания» является наличие CSS свойства content.
Т.е. вот так, мы не получим никакого эффекта:
|
1 2 3 4 5 6 7 |
.test::after { width: 100px; height: 50px; background: #f0f000; display: block; //content: " After "; } |
Но стоит только убрать комментарий перед content, как всё заработает. Не требуется что либо задавать, это может быть пустая строка.
|
1 2 3 |
.test::after { content: ""; } |
Одно двоеточие или два?
Работают одинаково как тот, так и другой вариант. Двойное двоеточие появилось в спецификации CSS3 как желание упорядочить псевдоклассы, но поддержка другого варианта осталась.
|
1 2 3 4 5 6 |
.test::before{ .. } .test:before { .. } |
Где в DOM располагаются :after и :before?
Из-за того, что контейнеры отсутствуют в реальном HTML коде, возникает путаница : до чего (before) и после (after) чего?
Псевдо-контейнеры находятся внутри контейнера, к которому применяются, располагаясь до (before) или после (after) содержимого.
Вот небольшая иллюстрация:
HTML код примера
|
1 2 3 |
<div class="test"> <div class="content">Content</div> </div> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
// основной контейнер (большой серый) .test { width: 300px; height: 150px; background: #f0f0f0; } // его содержимое - темно серый прямоугольник .test .content { width: 100px; height: 50px; background: #d0d0d0; } // псевдо-класс after, желтый .test::after { width: 100px; height: 50px; background: #f0f000; display: block; content: " After "; } // псевдо-класс before, лиловый .test::before { width: 100px; height: 50px; background: #f000f0; display: block; content: " Before "; } |
Если основной контейнер имеет относительное позиционирование, то задав псевдо-контейнерам абсолютное позиционирование, можно манипулировать их положением относительно основного.