Índice

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>
images/cap18img07.png

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>  ...