Gli Pseudo-elementi sono usati per aggiungere degli stili diversi ai selettori (o parti di selettori) a cui sono applicati.

Pseudo-elementi CSS

Gli Pseudo-elementi sono usati per aggiungere degli stili diversi ai selettori (o parti di selettori) a cui sono applicati.

Pseudo-elementi

Pseudo-elemento	Utilizzo
:first-letter	Utilizzato per aggiungere stili speciali alla prima lettera di un elemento
:first-line	Utilizzato per aggiungere stili speciali alla prima riga di un elemento
:before	Può essere utilizzato per inserire del contenuto prima di un elemento
:after	Può essere utilizzato per inserire del contenuto dopo di un elemento

Sintassi

selettore:pseudo-elemento {
proprietà: valore;
/è possibile inserire una o più proprietà/
}

Possiamo utilizzare le classi CSS:

selettore.NomeClasse:pseudo-elemento {
proprietà: valore;
/è possibile inserire una o più proprietà/
}

:first-line

Utilizzato per aggiungere stili speciali alla prima riga di un elemento:

span {
  color: blue;
font-family: verdana;
font-size: 11px;
}
span:first-line {
  color: red;
font-family: verdana;
  font-weight: bold;
}

¤ Clicca qui per visualizzare la demo dell'esempio... ¤

:first-letter

E’ usato per aggiungere uno stile speciale alla prima lettera del testo in un selettore:

span {
  color: blue;
font-family: verdana;
font-size: 11px;
}
span:first-letter {
  color: red;
font-family: verdana;
  font-weight: bold;
}

¤ Clicca qui per visualizzare la demo dell'esempio... ¤

:before

Può essere utilizzato per inserire del contenuto prima di un elemento.

:after

Può essere utilizzato per inserire del contenuto dopo di un elemento.

Pseudo-elementi e Classi CSS

Gli Pseudo-elementi possono essere combinati con le classi CSS:

span.Colorato {
  color: blue;
  font-family: verdana;
font-size: 12pt;
}
span.Colorato:first-line {
  color: red;
font-family: verdana;
  font-weight: bold;
}

css

css menu font css template css css align css javascript css templates dvd css css tutorial css center css download html css css vertical css firefox css margin css div css editor dvd region css css float css link css design css overflow css border css style text css css ie background css css generator css ul css reference css position css padding css input css class css images css layout css server css software css a table css css background image css img css mozilla css css filter css validator cisco css css zen css examples css properties css hover css zen garden image css what is css css list styles css css display css training css form box css css help css program background image css clan css css background css body css bordi css font css frame css guida completa css horizontal css html css image css img css layer css p css region css table css testo css text css vault css zengarden div css firefox css float css form css guida ai css guida css immagine css immagini css javascript css manuale css menu css protezione css rapid css region css strumenti di decodifica css style css manuale istruzioni usare documentazione css tutorial advanced css tutorial corso css css div tutorial css guida css guida completa css manuale css menu tutorial css tutorial download guida guida ai css guida css manuale css tutorial css

css, guida, Tutorial,

Vai nel sito Morpheusweb.it - Risorse per Webmaster
asp, dhtml

Morpheusweb.it - Risorse per Webmaster" tratta di asp, javascript, php, guida, Tutorial

Gli Pseudo-elementi sono usati per aggiungere degli stili diversi ai selettori (o parti di selettori) a cui sono applicati.

selettore:pseudo-elemento { proprietà: valore; /*è possibile inserire una o più proprietà*/ }

selettore.NomeClasse:pseudo-elemento { proprietà: valore; /*è possibile inserire una o più proprietà*/ }

span { color: blue; font-family: verdana; font-size: 11px; } span:first-line { color: red; font-family: verdana; font-weight: bold; }

span { color: blue; font-family: verdana; font-size: 11px; } span:first-letter { color: red; font-family: verdana; font-weight: bold; }

span.Colorato { color: blue; font-family: verdana; font-size: 12pt; } span.Colorato:first-line { color: red; font-family: verdana; font-weight: bold; }

css

selettore:pseudo-elemento {
proprietà: valore;
/è possibile inserire una o più proprietà/
}

selettore.NomeClasse:pseudo-elemento {
proprietà: valore;
/è possibile inserire una o più proprietà/
}

span {
color: blue;
font-family: verdana;
font-size: 11px;
}
span:first-line {
color: red;
font-family: verdana;
font-weight: bold;
}

span {
color: blue;
font-family: verdana;
font-size: 11px;
}
span:first-letter {
color: red;
font-family: verdana;
font-weight: bold;
}

span.Colorato {
color: blue;
font-family: verdana;
font-size: 12pt;
}
span.Colorato:first-line {
color: red;
font-family: verdana;
font-weight: bold;
}