CSS: после того, как псевдоэлемент не отображается на <img>? [Дубликат]
На этот вопрос уже есть ответ:
CSS: после не добавления контента к определенным элементам 3 ответаУ меня есть изображение, которое скользит вверх из меню, когда вы наводите его. Поскольку он скрыт под меню, я хочу сделать нижнюю часть изображения немного размытой, добавив темное затухание к нижней части. Я решил, что лучший способ добиться этого - использовать псевдоэлементы. Меня не очень заботит поддержка IE, потому что это такая маленькая деталь.
Итак, вот что у меня есть:
.header-section .trygg-ehandel-icon {
position: absolute;
top: 45px;
right: 280px;
z-index: 0;
display: block;
// Stripped out some transition style here
}
// Here's where the cool stuff begins!
.header-section .trygg-ehandel-icon::after {
position: absolute;
top: 0px; left: 0px;
height: 20px; width: 20px;
display: block;
content: '.';
z-index: -999999px;
background: red;
}
Во-первых, я не уверен, использовать ли двойные или одинарные двоеточия перед "после". Я всегда использовал один, но недавно я заметил, что люди используют два, так какой же путь? Либо похоже на работу!
Вы можете увидеть это в действии здесь:http: //goo.gl/RupQ
Над заголовком появляется желтый логотип. Почему я не вижу красную рамку 20x20 над изображением? Родитель .trygg-ehandel-icon
) имеет абсолютное положение, поэтому псевдоэлемент должен отображаться относительно него, верно?
Я пытаюсь это исправить уже больше часа, есть предложения?