Pseudo-elementi :before e :after nei CSS

Pseudo-elementi :before e :after consentono di aggiungere contenuti in piu prima e dopo l'elemento (contenuto del elemento) a cui sono stati applicati.

pseudo before e after

In totale ci sono diversi tipi di pseudo-elementi :first-line, :first-letter, ::selection, :before e :after.  Questo articolo descrive gli ultimi due come sono i più utilizzati .

Le sintassi di pseudo-elementi

Pseudo-elementi sono apparsi ancora in CSS1, ma sono stati uficialmente rilasciati solo in CSS 2.1. All'inizio nella sintassi si utilizzavano solo una copia di puntini , ma in CSS3 si utiliizano due copie di puntini  per distinguerli da pseudo-classi:

2

Ma in ogni caso i browser moderni sono in grado di comprendere entrambi i tipi di sintassi, tranne Internet Explorer 8, che richiede solo un copia . Pertanto per essere sicuri meglio utilizzare una.

Un esempio di utilizzo di pseudo-elementi :before e :after

Gli pseudo-elementi posiamo dire semplificano e sostituscono le costruzioni HTML come mostrato sul disegno sotto

modelloPseudo

Questo disegno in un  modo molto semplificato mostra pseudo-elemneti,  ma vorei subito precisare che in realta esso non si metono ne davanti ne dietro ma nel posto precisato da stili ad esso atribuiti! Non prendere in cosiderazione parole before e after. Perche esso che creano la confusione. Con la proprieta z-index  posiamo sempre regolare la loro  posizione sulla asse Y nel costruire un elemento.

Uso di :before e :after

 Per aggiungere dei contenuti al interno di un pseudo-elemento si utilizza la CSS-proprietà content.

Senza di essa in realta non funzionera (non vedremo cambiamenti ) quindi deve essere per forza anche priva del contenuto.

Un semplice esempio: è necessario aggiungere le virgolette per le citazioni:

before e after nei CSS

blockquote:before {  
    content: open-quote;  
}  
blockquote:after {  
    content: close-quote;  
}  

Come stilizzare pseudo-elementi

A pesudo-elementi posiamo atribuire stili CSS come a qualsiasi altro elemento in css : cambiando colore, aggiungere sfondo, regolare le dimensione di caratteri, l'allineamento del testo, ecc

pseudoelementi in  CSS

blockquote:before {  
    content: open-quote;  
    font-size: 24pt;  
    text-align: center;  
    line-height: 42px;  
    color: #fff;  
    background: #ddd;  
    float: left;  
    position: relative;  
    top: 30px;  }
  
blockquote:after {  
    content: close-quote;  
    font-size: 24pt;  
    text-align: center;  
    line-height: 42px;  
    color: #fff;  
    background: #ddd;  
    float: rightright;  
    position: relative;  
    bottombottom: 40px;  
}   

Gli elementi creati sono dei elementi inline , per cio  quando si specifica l'altezza o la larghezza è necessario agiungere  display: block per transformarli in elementi block:

displaiBlock pseudo

blockquote:before {  
    content: open-quote;  
    font-size: 24pt;  
    text-align: center;  
    line-height: 42px;  
    color: #fff;  
    background: #ddd;  
    float: left;  
    position: relative;  
    top: 30px;  
    border-radius: 25px;  
  
    /** definire elemento come block **/  
    display: block;  
    height: 25px;  
    width: 25px;  
}  
blockquote:after {  
    content: close-quote;  
    font-size: 24pt;  
    text-align: center;  
    line-height: 42px;  
    color: #fff;  
    background: #ddd;  
    float: rightright;  
    position: relative;  
    bottombottom: 40px;  
    border-radius: 25px;  
  
    /** definire elemento come block **/  
    display: block;  
    height: 25px;  
    width: 25px;  
}  

Utilizzo immagini o colori come lo sfondo in :before e :after

 All'interno di pseudo elemento si può  utilizzare al posto del testo normale una immagine o agiuingere  un'immagine di sfondo.

immagine nei pseudo elementi

blockquote:before {  
    content: " ";  
    font-size: 24pt;  
    text-align: center;  
    line-height: 42px;  
    color: #fff;  
    float: left;  
    position: relative;  
    top: 30px;  
    border-radius: 25px;  
  
    background: url(images/quotationmark.png) -3px -3px #ddd;  
  
    display: block;  
    height: 25px;  
    width: 25px;  
}  
blockquote:after {  
    content: " ";  
    font-size: 24pt;  
    text-align: center;  
    line-height: 42px;  
    color: #fff;  
    float: rightright;  
    position: relative;  
    bottombottom: 40px;  
    border-radius: 25px;  
  
    background: url(images/quotationmark.png) -1px -32px #ddd;  
  
    display: block;  
    height: 25px;  
    width: 25px;  
}  

In questo esempio, la proprietà content è  vuota, è necessario, altrimenti pseudo elemento non verrà visualizzato correttamente. Dato che abbiamo aggiunto una immagine al posto del testo.

Utilizzare pseudo-elemnti :before e :after insieme con le pseudo-classi

Gli pseudo-elementi possono essere utilizzati con pseudo-classi, nel nostro esempio, contribuiràno ad aggiungere alle apici della citazione  hover-effetto:

pseudoelementi e pseudoclassi in  CSS

blockquote:hover:after, blockquote:hover:before {  
    background-color: #555;  
}  

Aggiungere  effeto  transition .

Inoltre è possibile applicare una proprietà di transition per un agevole cambio di colore per la citazione:

-o-transition: all 350ms;  
-moz-transition: all 350ms;  
-webkit-transition: all 350ms;
transition: all 350ms; 
 

Esempi di utilizzo di :before e :after:

Foglio con ombra


<div class="box effect2">
        <h3>Effect 2</h3>
</div>
/*  CSS*/
.box h3{
        text-align:center;
        position:relative;
        top:80px;
}
.box {
        width:70%;
        height:200px;
      background:#FFF;
        margin:40px auto;
       
}
.effect2
{
  position: relative;
 
}
.effect2:before, .effect2:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  box-shadow: 0 15px 10px #777;
  transform: rotate(-3deg);
}
.effect2:after
{
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}

Bottone 3d in css

Clicca me !

Se voresti generare un bottone gel genere visita questa pagina https://tympanus.net/codrops/2012/01/11/css-buttons-with-pseudo-elements/

 

E altri esemi puoi vedere qui

E per generare dei stili per realizzazione dei fogli (blochi) con ombra come nel primo esempio passa qua

E vi mostrero anche un esempio generato su quella pagina:

Sono il blocco con gradient. La mia ombra sotto è stata generata con pseudo elemento :after

 

Letto 604 volte