html, body{
margin:0;
padding:0;
}
body{
width:350px;
height:250px;
font-family:Arial, sans-serif;
line-height:30px;
}
.two-cards div{
display:inline-block;
position:relative;
width:120px;
height:180px;
margin-top:30px;
background:white;
margin-right:10px;
margin-left:10px;
}
/* неочевидная деталь */
.two-cards div:before, .two-cards div:after{
width: 20px;
}
/* автоматический поворот нижней иконки */
.two-cards div:after {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.two-cards div.ace-heart {
background: url('/assets/pcourse2/heart-ace.png')no-repeat 50% 50% white;
}
.two-cards div.two-spade {
background: url('/assets/pcourse2/spade-two.png')no-repeat 50% 50% white;
}
.two-cards div.ace-heart:before {
position:absolute;
top:5px;
left:5px;
content:"A";
color:red;
font-size:25px;
font-weight:bold;
height:50px;
width:20px;
background: url('/assets/pcourse2/heart-icon.png')no-repeat 30% 100% white;
}
.two-cards div.ace-heart:after {
position:absolute;
bottom:5px;
right:5px;
content:"A";
color:red;
font-size:25px;
font-weight:bold;
height:50px;
width:20px;
background: url('/assets/pcourse2/heart-icon.png')no-repeat 30% 100% white;
}
.two-cards div.two-spade:before {
position:absolute;
top:5px;
left:5px;
content:"2";
color:black;
font-size:25px;
font-weight:bold;
height:50px;
width:20px;
background: url('/assets/pcourse2/spade-icon.png')no-repeat 30% 100% white;
}
.two-cards div.two-spade:after {
position:absolute;
bottom:5px;
right:5px;
content:"2";
color:black;
font-size:25px;
font-weight:bold;
height:50px;
width:20px;
background: url('/assets/pcourse2/spade-icon.png')no-repeat 30% 100% white;
}
Подскажите пожалуйста, что не так с моим кодом? Почему если без “contetn:;” не отображается background картинка? Возможно я не все уловил с курса? Прокомментируйте пожалуйста.