Exemplu
Următorul exemplu introduce URL-ul în paranteză, după fiecare link:
a:after
{
content: " (" attr(href) ")";
}
Încearcă - l singur » Mai multe "Try it Yourself" - "Try it Yourself" exemplele de mai jos.
Definiție și utilizare
Proprietatea de conținut este utilizat cu: înainte și: după pseudo-elementele, pentru a insera conținutul generat.
| Valoare implicită: | normal |
|---|---|
| Mostenit: | no |
| Animatable: | no. Read about animatable |
| Versiune: | CSS2 |
| sintaxa 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 |
Suport pentru browser-
Numerele din tabel specifica prima versiune de browser care acceptă pe deplin proprietatea.
| Proprietate | |||||
|---|---|---|---|---|---|
| content | 1.0 | 8 | 1.0 | 1.0 | 4 |
Note: IE8 acceptă numai proprietatea de conținut în cazul în care este specificat un DOCTYPE!.
CSS Sintaxa
content: normal|none|counter|attr| Valori de proprietate Valoare Descriere Exemplu normal Valoare implicită. Setează conținutul, în cazul în care este specificat, la normal, care implicit este "none" (which is nothing) Try it » none Setează conținutul, în cazul în care se specifică, la nimic Try it » counter Setează conținutul ca un contor Try it » attr (attribute) Setează conținutul ca fiind unul dintre selector's atribut Try it » string Setează conținutul în textul pe care îl specificați Try it » open-quote Setează conținutul să fie un citat deschidere Try it » close-quote Setează conținutul să fie un citat de închidere Try it » no-open-quote Elimină citatul de deschidere din conținutul, dacă este specificat Try it » no-close-quote Elimină citatul de închidere din conținutul, dacă este specificat Try it » url( url ) Setează conținutul să fie un fel de mass - media (an image, a sound, a video, etc.) Try it » initial Setează această proprietate la valoarea implicită. Citiți despre inițială inherit Mosteneste această proprietate de la elementul părinte. Citiți despre moștenesc
Mai multe exemple
Exemplu
Cum de a adăuga culori pentru bullet <ul> sau <ol> , prin eliminarea gloanțele lor implicite și adăugarea unei entități HTML care arata ca gloante (•) :
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 */
} Încearcă - l singur »
Pagini similare
Referință CSS: : înainte de elementul pseudo
Referință CSS: : după elementul pseudo