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

Курсы §18. Селекторы. Часть 2
1 
/*Туз*/

.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;
}

2

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

.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;
}

1 лайк
3

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

.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 - это уже расписать по картам)))

1 лайк
4

Подскажите, если картинка у псевдоэлеменов спозиционирована не в пикселях, это является ошибкой? Хотелось бы, чтобы ответила администрация. Спасибо

6

Здравствуйте!
Псевдоэлемент не обязательно позиционировать при помощи пикселей. Ошибкой это не является. По сути, псевдоэлемент - такой же элемент, как любые другие. Практически всё, что применимо к любому элементу, можно применить и к псевдоэлементу.

7

Там просто в задании указано: Все размеры шрифта и фоновых изображений, координаты указаны в пикселях и кратны 5 . Поэтому я и спросил