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> ...
Si desea saber más, le proponemos el siguiente libro:
couv_RIT35HTM.png
60-signet.svg
Versión impresa
20-ecran_lettre.svg
Versión online
41-logo_abonnement.svg
En ilimitado con la suscripción ENI
130-boutique.svg
En la tienda oficial de ENI
Anterior
Pseudoclases de párrafo
Siguiente
Pseudoclases de selección