100% критику 19/20

/*Туз*/

.ace-heart::before {
position: absolute;
left: 5px;
top: 5px;
content: “A”;
color: red;
font-size: 25px;
font-weight: bold;
padding-bottom: 45px;
background: url(“heart.svg”) no-repeat 50% 50%;
background-size: 25px;
}

.ace-heart::after {
position: absolute;
right: 5px;
bottom: 5px;
content: “A”;
color: red;
font-size: 25px;
font-weight: bold;
padding-bottom: 45px;
background: url(“heart.svg”) no-repeat 50% 50%;
background-size: 25px;
}

.ace-heart {
background: url(“heart.svg”) no-repeat 50% 50%;
background-size: 50px;
}

/Двойка/
.two-spade::before {
position: absolute;
left: 5px;
top: 5px;
content: “2”;
color: black;
font-size: 25px;
font-weight: bold;
padding-bottom: 45px;
background: url(“spade.svg”) no-repeat 50% 50%;
background-size: 25px;
}

.two-spade::after {
position: absolute;
right: 5px;
bottom: 5px;
content: “2”;
color: black;
font-size: 25px;
font-weight: bold;
padding-bottom: 45px;
background: url(“spade.svg”) no-repeat 50% 50%;
background-size: 25px;
}

.two-spade {
background: url(“spade.svg”) no-repeat 50% 50%;
background-size: 50px;
}

Я сократил код, объединив общие свойства. Пример для туза (двойка аналогично):

.ace-heart::before, .ace-heart::after {
content: “A”;
color: red;
font-size: 25px;
font-weight: bold;
position: absolute;
padding-bottom: 45px;
background: url(“heart.svg”) no-repeat 50% 50%;
background-size: 25px auto;
}

/* это верхний угол*/
.ace-heart::before {
left: 5px;
top: 5px;
}

/* это нижний угол*/
.ace-heart::after {
right: 5px;
bottom: 5px;
}

Ой, а можно для обеих карт выписать общие свойства, и тогда ещё короче будет)))

.ace-heart::before, .ace-heart::after, .two-spade::before, .two-spade::after {
font-size: 25px;
font-weight: bold;
position: absolute;
padding-bottom: 45px;
background-size: 25px auto;
}

А content, color и url - это уже расписать по картам)))