Здравствуйте,
У меня вот такая ситуация получилась. Я только учу 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;
}
Простой
Простой
