Contoh
Contoh berikut menyisipkan URL dalam kurung setelah setiap link:
a:after
{
content: " (" attr(href) ")";
}
Cobalah sendiri " Lebih "Try it Yourself" contoh di bawah ini.
Definisi dan Penggunaan
Properti konten digunakan dengan: sebelum dan: setelah pseudo-elemen, untuk memasukkan konten yang dihasilkan.
| nilai default: | normal |
|---|---|
| mewarisi: | no |
| animatable: | no. Read about animatable |
| Versi: | CSS2 |
| sintaks 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 |
Dukungan Browser
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti.
| Milik | |||||
|---|---|---|---|---|---|
| content | 1.0 | 8,0 | 1.0 | 1.0 | 4.0 |
Note: IE8 hanya mendukung properti konten jika DOCTYPE ditentukan!.
CSS Syntax
content: normal|none|counter|attr|string|open-quote|close-quote|no-open-quote|no-close-quote|url|initial|inherit;Nilai properti
| Nilai | Deskripsi | Contoh |
|---|---|---|
| normal | nilai default. Set konten, jika ditentukan, normal, yang default adalah "none" (which is nothing) | Try it » |
| none | Set konten, jika ditentukan, untuk apa-apa | Try it » |
| counter | Menetapkan konten sebagai counter | Try it » |
| attr (attribute) | Menetapkan konten sebagai salah satu selector's atribut | Try it » |
| string | Mengatur konten dengan teks yang Anda tentukan | Try it » |
| open-quote | Menetapkan konten menjadi kutipan pembuka | Try it » |
| close-quote | Menetapkan konten menjadi kutipan penutupan | Try it » |
| no-open-quote | Menghapus kutipan pembuka dari konten, jika ditentukan | Try it » |
| no-close-quote | Menghapus kutipan penutupan dari konten, jika ditentukan | Try it » |
| url( url ) | Menetapkan konten menjadi semacam media (an image, a sound, a video, etc.) | Try it » |
| initial | Set properti ini ke nilai default. Baca tentang awal | |
| inherit | Mewarisi properti ini dari elemen induknya. Baca tentang mewarisi |
Contoh lebih
Contoh
Bagaimana menambahkan warna peluru untuk <ul> atau <ol> dengan menghapus peluru standar mereka dan menambahkan entitas HTML yang terlihat seperti peluru (•) :
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 */
} Cobalah sendiri " Pages terkait
Referensi CSS: : sebelum elemen semu
Referensi CSS: : setelah elemen semu