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

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

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

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

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

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

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

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

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

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

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

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

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

HTML код примера

CSS

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

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

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

CSS высота равна ширине

Август 11, 2019 г.

Ширина и высота контейнера - независимые параметры, но иногда хотелось бы чтобы связь между ними была, к примеру, для сохранения пропорций контейнера при адаптивной верстке. Прямой связи в CSS между width и height нет, и нет возможности задать ...

Читать

Как делаются сайты с адаптивным дизайном?

Апрель 7, 2016 г.

Последний писк браузерной моды - адаптивный дизайн - вызван широким внедрением в быт мощных смартфонов. По количеству ядер процессора, быстродействию и ...

Читать

 

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

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



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