Испытание: псевдоэлементы 19/20. 100%, но не откажусь от ЦУ.

Курсы §18. Селекторы. Часть 2
1 
html,
body {
    margin: 0;
    padding: 0;
    font-family: "Arial", sans-serif;
    line-height: 30px;
}

body {
    min-width: 550px;
    min-height: 290px;
    padding: 10px;
}

.two-cards {
    width: 350px;
    height: 250px;
    padding: 10px;
    text-align: center;
}

.two-cards div {
    position: relative;
    display: inline-block;
    width: 120px;
    height: 180px;
    margin: 0 10px;
    margin-top: 30px;
    vertical-align: middle;
    background-color: white;
    border-radius: 5px;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.8);
}

/* Поворот нижней иконки */
.two-cards div::after {
    transform: rotate(180deg);
}

/* Ширина иконок, не изменяйте */
.two-cards div::before,
.two-cards div::after {
    width: 20px;
}

.ace-heart {
    background: url("/assets/course57/heart.svg") no-repeat 50% 50%;
    background-size: 50px auto;
}

.two-spade {
    background: url("/assets/course57/spade.svg") no-repeat 50% 50%;
    background-size: 50px auto;
}

.ace-heart::before, .ace-heart::after {
    content: "A";    
    color: red;
    font-size: 25px;
    font-weight: bold;
    position: absolute;
    padding-bottom: 20px;
    background: url("/assets/course57/heart.svg") no-repeat 50% 100%;
    background-size: 25px auto;    
}

.two-spade::before, .two-spade::after {
    content: "2";       
    color: black;
    font-size: 25px;
    font-weight: bold;
    position: absolute;
    padding-bottom: 20px;
    background: url("/assets/course57/spade.svg") no-repeat 50% 100%;
    background-size: 25px auto;
}

.ace-heart::before, .two-spade::before {    
    left: 5px;
    top:5px;
}

.ace-heart::after, .two-spade::after {    
    right: 5px;
    bottom:5px;     
}
2

Отличный код. Замечаний нет.

3

Благодарю!

4

Немного не понял момент с чирвами и пиками по центру карты.
Почему так работает как нужно (масть на белом фоне):
.ace-heart {
background: url("/assets/course57/heart.svg") no-repeat 50% 50%;
background-size: 50px auto;
}
А вот так - нет (масть без фона):
.two-spade .ace-heart {
background: url("/assets/course57/heart.svg") no-repeat 50% 50%;
background-size: 50px auto;
}
Хотя вроде как одно и тоже.

5

Ваш селектор показывает вложенность, но это же “соседи”. Может вы хотели так написать: .two-cards .ace-heart ?

6

Да, .two-cards .ace-heart, ошибся как минимум в сообщении. Но замена на .two-cards не помогла. Может фон не белый из-за того что .two-cards это класс . Завтра подумаю еще над этим.

7

у вас чуть выше в коде прописано:

.two-cards div {
…
background-color: white;
}

когда вы задаете background (а не background-image), он включает в себя и background-color тоже. Если вы в background прописываете только информацию, касающуюся исключительно фонового рисунка (адрес, повтор, позицию), то это означает так же и “фонового цвета - нет”. А дальше уже начинает работать приоритет селекторов. .ace-heart более слабый селектор, чем .two-cards div - поэтому “переписывания” цвета фона не происходит. А вот .two-cards .ace-heart уже более сильный селектор, чем .two-cards div - поэтому и происходит “сбрасывание” фона на ноль

8

Вас понял, спасибо. Добавил ради проверки в мой вариант перед адресом картинки масти цвет и заработало.