Selectores de inserción
1. :before
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.
2. :after
La pseudoclase :after, asociada a la propiedad content, permite insertar un contenido después de un elemento.
Ejemplo
<!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> ... Si desea saber más, le proponemos el siguiente libro:
Versión impresa
Versión online
En ilimitado con la suscripción ENI
En la tienda oficial de ENI
Condiciones generales de usoCopyright - © Éditions ENI ||Política de protección de datos del grupo ENI