Esempio
L'esempio seguente inserisce l'URL tra parentesi dopo ogni link:
a:after
{
content: " (" attr(href) ")";
}
Prova tu stesso " Più "Try it Yourself" esempi di seguito.
Definizione e utilizzo
La proprietà dei contenuti viene utilizzato con il: before e: after pseudo-elementi, per inserire contenuto generato.
| Valore di default: | normal |
|---|---|
| Inherited: | no |
| animatable: | no. Read about animatable |
| Versione: | CSS2 |
| sintassi JavaScript: | You can't give an element a pseudo-class by using JavaScript, but there are other ways to get the same result: Try it |
Supporto per il browser
I numeri nella tabella indicano la prima versione del browser che supporta pienamente la proprietà.
| Proprietà | |||||
|---|---|---|---|---|---|
| content | 1.0 | 8.0 | 1.0 | 1.0 | 4.0 |
Note: IE8 supporta solo la proprietà dei contenuti se viene specificato un DOCTYPE!.
CSS Sintassi
content: normal|none|counter|attr|string|open-quote|close-quote|no-open-quote|no-close-quote|url|initial|inherit;I valori delle proprietà
| Valore | Descrizione | Esempio |
|---|---|---|
| normal | Valore di default. Imposta il contenuto, se specificato, alla normalità, che di default è "none" (which is nothing) | Try it » |
| none | Imposta il contenuto, se specificato, a nulla | Try it » |
| counter | Imposta il contenuto come un contatore | Try it » |
| attr (attribute) | Imposta il contenuto come uno dei selector's attributo | Try it » |
| string | Imposta il contenuto per il testo specificato | Try it » |
| open-quote | Imposta il contenuto di essere un preventivo di apertura | Try it » |
| close-quote | Imposta il contenuto di essere un preventivo di chiusura | Try it » |
| no-open-quote | Rimuove la citazione di apertura dal contenuto, se specificato | Try it » |
| no-close-quote | Rimuove la citazione chiusura dal contenuto, se specificato | Try it » |
| url( url ) | Imposta il contenuto di essere un qualche tipo di supporto (an image, a sound, a video, etc.) | Try it » |
| initial | Consente di impostare questa proprietà al suo valore di default. Leggi iniziale | |
| inherit | Eredita questo immobile dal suo elemento genitore. Leggi su erediterà |
Altri esempi
Esempio
Come aggiungere colori Bullet For <ul> o <ol> togliendo loro proiettili di default e l'aggiunta di una entità HTML che assomiglia a proiettili (•) :
ul {
list-style: none; /* Remove list bullets */
padding: 0;
margin: 0;
}
li {
padding-left: 16px;
}
li:before {
content: "•"; /* Insert content that
looks like bullets */
padding-right: 8px;
color: blue; /* Or a color you prefer */
} Prova tu stesso " Pagine correlate
Riferimento CSS: : prima elemento pseudo
Riferimento CSS: : dopo elemento pseudo