content | Codingku

Properti CSS content digunakan untuk membuat teks konten.

Properti ini memungkinkan kamu untuk menyediakan konten yang tidak termasuk dalam dokumen HTML.

Properti content dapat berguna untuk melakukan hal-hal seperti, menghasilkan judul bernomor, mengganti elemen dengan gambar atau konten multimedia, atau memasukkan kata “Bab”, “Contoh”, “Gambar”, dll di depan elemen yang berlaku.

Daripada menambahkan konten itu ke dokumen HTML, kamu dapat menggunakan CSS untuk membuatnya secara otomatis.

Properti content ini biasanya sering digunakan untuk membuat konten teks pada pseudo-elements :before dan :after.

CSS Syntax

content: normal | none | counter | attr | string | open-quote | close-quote | no-open-quote | no-close-quote | url |
initial | inherit;

Attribute Value

default content: normal;

Tidak ada konten yang ditambahkan ke elemen.

content: "Foo bar";

Misalnya dengan membuat elemen HTML seperti ini:

<p class="element">
  Hello world
</p>

Kemudian buatlah CSS seperti ini:

.element:before {
  content: "Foo bar";
}

Konten teks “Foo bar” akan ditambahkan ke konten elemen.

Perhatikan bagaimana hasil akhirnya menggabungkan teks dari HTML dan teks dari CSS.

content: url(/images/jt.png);

Kamu dapat menyisipkan gambar dengan menggunakan fungsi url ().

content: attr(data-something);

Buatlah elemen HTML seperti berikut:

<p class="element" data-something="codekit.id">
  Hello world
</p>

Dan buatlah CSS seperti ini:

.element:before {
  content: attr(data-something);
}

Elemen akan mengambil konten teks dari atribut HTML.