Teoría
Teoría

El pseudoelemento ::after

El pseudoelemento after es similar a before. La diferencia es que añade la pseudoetiqueta al final del elemento, en lugar de al principio. Por ejemplo:

.heart::after { content: "Corazones"; }

El resultado se puede representar así:

<div class="queen heart">
  <em>Reina</em>
  <after>Corazones</after>
</div>

Puedes usar los pseudoelementos before y after a la vez. Así puedes añadir dos pseudoelementos a un elemento como los de estos ejemplos mediante CSS.

Observa que los pseudoelementos se escriben con dos puntos dobles. Así se distinguen de las pseudoclases, que usan dos puntos simples.

En versiones anteriores del estándar, los pseudoelementos se podían escribir con :. Por eso los navegadores más antiguos también entienden esa sintaxis. Actualmente se recomienda usar los dos puntos dobles para los pseudoelementos.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>El pseudoelemento ::after</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; }

ObjetivosRealizado

Añade a la carta .card un pseudoelemento after y asígnale:

el contenido A (la letra latina),
un tamaño de fuente de 30px,
el color de texto #e50000.