Gli pseudo-elementi css :before e :after

Questi due  pseudo-elementi sevono a far posizionare un determinato "elemento" rispettivamente prima e dopo uno specifico tag html (div, h1, ecc).

Consideriamo di avere questa stringa:

Codice HTML

 <p class="demotext"><em><strong>Testo</strong></em></p>

la proprietà si scrive in questo modo:

Codice CSS

 .demotext:before {
  content: " 'prima' ";
}; 
.demotext:after {
     content: " 'dopo' ";
};

e il risultato è questo:

Testo

In realtà questa proprietà ha delle grosse potenzialità, nel senso che ci permette di fare cose molto più complesse del semplice esempio riportato prima.

Suppponiamo di avere questo elenco:

Codice HTML

 <a href="#" title="home">Home</a> 
<a href="#" title="contatti">Contatti</a> 
<a href="#" title="portfolio">Portfolio</a> 
<a href="#" title="curriculum">Curriculum</a>

e vogliamo mettere prima di ogni link un triangolino, il foglio di stile lo scriveremo così:

Codice CSS

 a{position: relative;} 

a:before{ content:" "; 
position: absolute; 
left:-15px; 
top:5px; 
width: 0; 
height: 0; 
border-bottom-width: 8px; 
border-bottom-style: solid; 
border-bottom-color: transparent; 
border-top-width: 8px; 
border-top-style: solid; 
border-top-color: transparent; 
border-left-width: 8px; 
border-left-style: solid; 
border-left-color: #FF3399; 
}

e il risultato è questo:

Home
Contatti
Portfolio
Curriculum