Почему у меня не работает :after/:before на img если прописан путь к картинки?

Question

[whiteleaf]

Здравствуйте,

У меня вот такая ситуация получилась. Я только учу css еще, но раньше с :after/:before проблем не было, а сейчас у меня получилось так:

Я сверстал блок, расположил поверх img кнопку с помощью :before, и хотел еще добавить тень с помощью :after. Кнопку добавил, и сразу решил прописать ссылку на какой-то имедж-холдер, чтобы img не был пустым, и в этот момент моя кнопка, которая располагалась в левом-верхнем углу, пропала.

Я уже пробовал и с z-index'ом решим эту проблему, но никак.

Почему так получилось, и подскажите, пожалуйста, как это можно решить.

Заранее спасибо!

<div class="feature">
						<img src="//lorempixel.com/55/55/technics/" alt="design-picture">
						<div class="details">
							<h3>Beautifully Coded</h3>
							<p>Not just superficial looks, Redux is beautiful behind the scenes too.</p>
						</div>
					</div>

и мой css

.feature {
	display: inline-block;
	padding: 7px 35px 21px 0;
}

.feature img {
	height: 55px;
	width: 55px;
	border-radius: 10px;
	position: relative;
	float: left;
	padding: 0 12px 5px 0;
	/*overflow: hidden;*/
	left: 0;
	top: 0;
}

.feature img:before,
.feature img:after {
	content: '';
	position: absolute;
	display: block;
}

.feature img:before {
	height: 30px;
	width: 30px;
	background: url(../img/sprite.png) 59px 117px;
	left: -8px;
	top: -7px;
}

.feature img:after {
	left: 0;
	top: 0;
	border:1px solid red; 
}

.details {
	float: left;
	width: 210px;
	margin-top: -7px;
} 

.details h3 {
	font: bold 13px/20px 'Helvetica Neue', Helvetica, Arial, sans-serif;
	color: #f1eee5;
	padding: 0 0 7px 0;
	margin: 0;
	width: 100%;
}

.details p {
	font: 12px/20px 'Helvetica Neue', Helvetica, Arial, sans-serif;
	color: #979797;
	padding: 0;
	margin: 0;
}

Answer 1

[Дмитрий]

:before и :after добавляет контент к содержимому элемента, а у img же как такового содержимого нет.
Решение - завернуть img в div и к нему уже применять псевдоэлементы.

Также псевдоэлементы нельзя применить к input

Comments

[whiteleaf]

Большое спасибо Вам за помощь!

[Александр Тимофеев]

Можно к input, но работать будет только в хроме