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

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

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

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

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

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

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

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

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

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

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

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

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

HTML код примера

CSS

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

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

Пропорциональное заполнение контейнера картинкой

Ноябрь 29, 2017 г.

Речь идет о том, чтобы показать изображение внутри контейнера так, чтобы оно заполнило собой весь контейнер, но при этом не изменились пропорции картинки. Сейчас это актуально в связи с необходимостью поддержки отображения сайта на мобильных устройствах. ...

Читать

Псевдоклассы состояния контейнера input

Октябрь 24, 2018 г.

Хотелось бы выделить такой перечень css псевдоклассов и приемов работы с ними, который основан на состоянии элемента INPUT. :checked псевдокласс Позволяет писать стили для радио/чек - боксов, которые выделены (checked) в текущий момент. [crayon-68cb3ca293974582942454/] ...

Читать

Битые картинки vs CSS

Февраль 6, 2021 г.

Перефразируя устойчивое выражение: broken image happens. И раз уж они все равно могут появиться на вашем сайте, то с ними нужно что то делать, т.е. как ...

Читать

Zoom-эффект на CSS3

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

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

Читать
 

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

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



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