Нихрена не отображаются двойки с маленькими пиками, вот код и скрин
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;
}
/* неочевидная деталь */
.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{
margin:30px 20px 0 0;
background:white url(/assets/pcourse2/heart-ace.png) no-repeat 50%;
}
.two-cards div.ace-heart:before{
content:“A”;
color: red;
font-size:25px;
font-weight:bold;
position:absolute;
padding: 0 0 25px 0;
top:5px;
left:5px;
background:url(/assets/pcourse2/heart-icon.png) no-repeat 1px 33px
}
.two-cards div.ace-heart:after{
content:“A”;
color: red;
font-size:25px;
font-weight:bold;
position:absolute;
height:50px;
bottom:5px;
right:5px;
background:url(/assets/pcourse2/heart-icon.png) no-repeat 1px 33px
}
.two-cards div.two-spade{
background:white url(/assets/pcourse2/spade-two.png) no-repeat 50%;
}
.two-cards div.two-spade:before{
content=“2”;
color:black;
font-size:25px;
height:50px;
font-weight:bold;
position:absolute;
top:5px;
left:5px;
background:white url(/assets/pcourse2/spade-icon.png) no-repeat 50% 100%;
}
.two-cards div.two-spade:after{
position:absolute;
content=“2”;
color:black;
font-size:25px;
height:50px;
font-weight:bold;
bottom:5px;
right:5px;
background: white url(/assets/pcourse2/spade-icon.png) no-repeat 50% 100%;
}
