Почему не работает стиль :: before или :: after?

Замечательные псевдо-классы, которые позволяют добавить виртуальные контейнеры в начало или конец контейнера. Как они работают и почему могут «не сработать»?

Условия для работы after и before

Псевдоклассы применимы к любым парным контейнерам, т.е. тегам которые могут «обернуть» какой то контент, имеют открывающийся и закрывающийся теги. К примеру, с <img> они не работают, а со <span></span> — пожалуйста.

Вторым важным требованием для «срабатывания» является наличие CSS свойства content.

Т.е. вот так, мы не получим никакого эффекта:

Но стоит только убрать комментарий перед content, как всё заработает. Не требуется что либо задавать, это может быть пустая строка.

Одно двоеточие или два?

Работают одинаково как тот, так и другой вариант. Двойное двоеточие появилось в спецификации CSS3 как желание упорядочить псевдоклассы, но поддержка другого варианта осталась.

Где в DOM располагаются :after и :before?

Из-за того, что контейнеры отсутствуют в реальном HTML коде, возникает путаница : до чего (before) и после (after) чего?

Псевдо-контейнеры находятся внутри контейнера, к которому применяются, располагаясь до (before) или после (after) содержимого.

Вот небольшая иллюстрация:

HTML код примера

CSS

Если основной контейнер имеет относительное позиционирование, то задав псевдо-контейнерам абсолютное позиционирование, можно манипулировать их положением относительно основного.

Написать комментарий

Мало букафф? Читайте есчо !

Zoom-эффект на CSS3

Октябрь 21, 2015 г.

Давайте рассмотрим, как сделать эффект небольшого увеличения картинки при наведении курсора на контейнер. Такой эффект может немного оживить страницу, ...

Читать

Делаем эффект параллакса для заднего фона на сайте

Октябрь 19, 2015 г.

Очень простая мулька, но выглядит при соответствующем фоне потрясающе. Сделаем так, чтобы при скроллинге страницы, фон двигался вдвое медленнее, создавая что то вроде эффекта параллакса. Этот кусочек скрипта привязывает нас к событию onscroll окна. ...

Читать

 

Комментарии к «Почему не работает стиль :: before или :: after?»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий: