Teoría
Teoría

Posicionamiento de pseudoelementos

Puedes asignar propiedades CSS a los pseudoelementos: cambiar su tipo de caja, su posicionamiento, sus márgenes, su fondo y mucho más.

Estas posibilidades se usan muy a menudo para crear efectos decorativos. Son muy prácticas.

En primer lugar, no necesitas añadir una etiqueta más para cada pequeño icono.

Además, puedes controlar esos iconos o elementos decorativos solo con CSS, lo que abre muchas posibilidades para crear efectos dinámicos interesantes.

En este ejemplo, usa position: absolute para situar los pseudoelementos dentro de la carta, que ya tiene position: relative. Las propiedades top, right, bottom y left indican la distancia a sus bordes; padding-bottom define el relleno inferior.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Posicionamiento de pseudoelementos</title> <link rel="stylesheet" href="course.css"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="card"> Texto de la carta </div> </body> </html>

CSS

.card { position: relative; width: 160px; height: 240px; margin: 0 auto; margin-top: 30px; background-color: white; border-radius: 5px; box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.8); } .card::before { content: "A"; font-size: 30px; color: #e50000; } .card::after { content: "A"; font-size: 30px; color: #e50000; }

ObjetivosRealizado

Asigna a .card::before un posicionamiento absoluto, un espacio interior inferior de 20px y las coordenadas izquierda y superior de 5px.
Asigna a .card::after un posicionamiento absoluto, un espacio interior inferior de 20px y las coordenadas derecha e inferior de 5px.