La pseudoclase :before, asociada a la propiedad content, permite insertar un contenido antes de un elemento.
Ejemplo
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="UTF-8"> <style type="text/css"> h1:before {content:url(arrow.gif);} </style> </head> <body> <h1>Capítulo 1</h1> <p>Lorem ipsum dolor sit amet...</p> <h1>Capítulo 2</h1> <p>Lorem ipsum dolor sit amet...</p> </body> </html>
La propiedad de estilo content agrega una flecha (arrow.gif) delante de cada título de nivel <h1>(h1:before).
La imagen arrow.gif está disponible en el área de descargas dedicada a este libro.
La pseudoclase :after, asociada a la propiedad content, permite insertar un contenido después de un elemento.
<!DOCTYPE html> <html lang="es"> <head> <title>Html5</title> <meta charset="UTF-8"> <style type="text/css"> h2:after {content:url(new.gif);} </style> </head> <body> ...
Suscripción
acceso ilimitado a todos los libros de ENI sin compromiso de permanencia
libro impreso o digital online