Proprietà CSS content
La proprietà content viene usata con ::before e ::after per generare contenuto in un elemento. Prova esempi pratici.
La proprietà content viene utilizzata con gli pseudo-elementi ::before e ::after per generare contenuto all'interno di un elemento. Senza un valore esplicito, questi pseudo-elementi non vengono renderizzati, quindi content è ciò che fa apparire una box generata.
Questa pagina spiega quando e come usare content: inserire testo semplice, recuperare valori degli attributi con attr(), numerare elementi con i contatori CSS, incorporare immagini e virgolette, e le insidie più comuni (come il testo generato che non è accessibile agli screen reader).
La proprietà accetta i seguenti valori:
- normal
- none
- counter
- attr
- string
- open-quote
- close-quote
- no-open-quote
- no-close-quote
- url
Il testo inserito con content non fa parte del DOM — non è possibile selezionarlo come il testo normale, e il supporto delle tecnologie assistive è inconsistente. Usalo per contenuto decorativo o supplementare, non per contenuto che deve essere sempre disponibile a ogni lettore. La proprietà quotes deve essere impostata sull'elemento affinché open-quote e close-quote rendano le virgolette effettive.
| Valore iniziale | normal |
|---|---|
| Si applica a | pseudo-elementi ::before e ::after. |
| Ereditato | No. |
| Animabile | No. |
| Versione | CSS2 |
| Sintassi DOM | element.style.content = "none"; |
Sintassi
Sintassi della proprietà CSS content
content: normal | none | counter | attr | string | open-quote | close-quote | no-open-quote | no-close-quote | url | initial | inherit;Esempio della proprietà content:
Esempio della proprietà CSS content con valore normal
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p::before {
content: "Name -";
}
.country::before {
content: normal;
}
</style>
</head>
<body>
<h2>Content property example</h2>
<p>My name is John</p>
<p class="country">I live in Canada</p>
</body>
</html>Risultato
Esempio della proprietà content con il valore "string":
Esempio della proprietà CSS content con valore string
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
li:before {
content: "List item";
}
p:after {
content: " with string value.";
}
</style>
</head>
<body>
<h2>Content property example</h2>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<p>Here is some paragraph</p>
</body>
</html>Nell'esempio seguente, puoi vedere che open-quote non può apparire senza close-quote.
Esempio della proprietà content con il valore "open-quote":
Esempio della proprietà content con i valori open-quote e close-quote
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
quotes: open-quote close-quote;
}
p::before {
content: open-quote;
}
p::after {
content: close-quote;
}
</style>
</head>
<body>
<h2>Content property example</h2>
<p>Hello, my name is John</p>
<p>I am from Canada</p>
</body>
</html>Esempio della proprietà content con i valori "open-quote" e "no-close-quote":
Esempio della proprietà content con i valori "open-quote" e "no-close-quote":
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p::before {
content: open-quote;
}
p::after {
content: no-close-quote;
}
</style>
</head>
<body>
<p>Example with content property</p>
</body>
</html>Usare il valore attr() per leggere un attributo
attr() recupera il valore di un attributo HTML nel contenuto generato. Un uso comune è mostrare la destinazione di un link o rendere visibile un attributo data-* come etichetta simile a un tooltip. Il valore dell'attributo viene sempre trattato come una string.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
a::after {
content: " (" attr(href) ")";
color: #888;
}
</style>
</head>
<body>
<p>Visit <a href="https://www.w3docs.com">W3docs</a> to learn more.</p>
</body>
</html>Questo renderizza il link come Visit W3docs (https://www.w3docs.com) to learn more. — nota come una string e attr() vengano concatenate semplicemente scrivendole una accanto all'altra.
Usare i contatori per numerare gli elementi
I contatori CSS permettono di generare numeri sequenziali senza modificare l'HTML. Si inizializza un contatore con counter-reset, lo si incrementa con counter-increment e lo si stampa con la funzione counter() all'interno di content. Questo è il modo idiomatico per numerare intestazioni, passaggi o figure.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
</style>
</head>
<body>
<h2>Introduction</h2>
<h2>Installation</h2>
<h2>Usage</h2>
</body>
</html>Ogni <h2> viene preceduto automaticamente da Section 1: , Section 2: e Section 3: .
Inserire un'immagine con il valore url()
Il valore url() incorpora una risorsa esterna — tipicamente una piccola icona — nella box generata. Funziona bene per marcatori decorativi, ma poiché l'immagine non è nel DOM non ha testo alternativo, quindi evitala per immagini significative.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.external::after {
content: url("https://www.w3docs.com/build/img/favicon.ico");
margin-left: 5px;
}
</style>
</head>
<body>
<p class="external">A link to an external resource</p>
</body>
</html>Il contenuto generato è decorativo per impostazione predefinita. Gli screen reader potrebbero ignorarlo o leggerlo in modo inconsistente tra i browser, e gli utenti non possono copiarlo. Non inserire mai testo che il lettore non deve assolutamente perdere (come un prezzo o un messaggio di errore) solo all'interno di un valore content.
Valori
| Valore | Descrizione |
|---|---|
| normal | Imposta il contenuto su normal. Questo è il valore predefinito. |
| none | Imposta il contenuto su niente. Lo pseudo-elemento non viene generato. |
| counter | Imposta il contenuto su un valore di contatore. |
| attr | Imposta il contenuto sul valore di un attributo dell'elemento selezionato. |
| string | Imposta il contenuto su una stringa di testo. |
| open-quote | Imposta il contenuto come virgoletta di apertura. |
| close-quote | Imposta il contenuto come virgoletta di chiusura. |
| no-open-quote | Rimuove la virgoletta di apertura dal contenuto. |
| no-close-quote | Rimuove la virgoletta di chiusura dal contenuto. |
| url | Imposta il contenuto su un URL che punta a una risorsa, come un'immagine, un suono o un video. Se l'immagine non può essere visualizzata, verrà ignorata o verrà mostrato un segnaposto. |
| initial | Imposta la proprietà al suo valore predefinito. |
| inherit | Eredita la proprietà dall'elemento padre. |
Proprietà correlate
La proprietà content ha effetto solo sulle box generate, quindi viene quasi sempre abbinata agli pseudo-elementi che le creano:
- ::before — inserisce contenuto generato prima del contenuto proprio dell'elemento.
- ::after — inserisce contenuto generato dopo il contenuto proprio dell'elemento.