- index.html
- style.css
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Fondos de pseudoelementos</title>
<link rel="stylesheet" href="course.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="card"></div>
</body>
</html>
CSS
.card {
position: relative;
width: 160px;
height: 240px;
margin: 0 auto;
margin-top: 30px;
background-color: white;
background-size: 50px auto;
border-radius: 5px;
box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.8);
}
.card::before {
content: "A";
position: absolute;
top: 5px;
left: 5px;
padding-bottom: 20px;
font-size: 30px;
color: #e50000;
background-size: 25px auto;
}
.card::after {
content: "A";
position: absolute;
right: 5px;
bottom: 5px;
padding-bottom: 20px;
font-size: 30px;
color: #e50000;
background-size: 25px auto;
transform: rotate(180deg);
}
Ha ido a otra página
Haga clic dentro del mininavegador para poner el foco en esta ventana.
ObjetivosRealizado
0
- Asigna a la carta la imagen de fondo
heart.svg, sin repetición y con la posición50% 50%. - Asigna a los pseudoelementos la imagen de fondo
heart.svg, sin repetición y con la posición50% 100%.
No cambies ni sobrescribas el color de fondo ni el tamaño de la imagen de fondo.