Css selektor atau Pseudo element ::before dan ::after digunakan pada saat pembuatan elemen yang tidak terlihat pada struktural elemen html. Selektor ::before dan ::after digunakan pada saat Anda ingin membuat atau menambahkan elemen baik berupa text maupun gambar di sebelum dan sesudah elemen html.
Selektor ::before dan ::after digenerate langsung oleh browser sehingga akan tetap kelihatan namun jika Anda inspect element atau view source pada browser kita tidak akan menemukan elemen tersebut.
Baca juga: Dasar CSS: Selektor pada Css
Selektor ini sudah didukung oleh semua browser, seperti internet explorer, edge, chrome, opera dan lain sebagainya. Selektor ::before dan ::after sudah diperkenalkan pada css versi 2, pada saat itu sitem penulisannya masih menggunakan single colon seperti :before dan :after.
Lalu pada Css versi 3 diterapkan menggunakan doubel colon seperti ::before dan ::after. Single dan doubel colon yang membedakan hanya jumlah tanda titik dua saja.
Penulisan Selektor ::before dan ::after
Pada selektor ini memiliki sifat sama seperti selektor lainnya yang dapat dikombinasikan dengan beberapa properties seperti font-size, background, color dan lain sebagainya. Namun yang perlu harus diperhatikan pada saat menggunakan kedua selektor ini supaya dapat berfungsi dengan benar, Anda wajib mendefenisikan properties content pada element yang akan Anda seleksi meskipun nilainya kosong.
Berikut beberapa properties content yang sering digunakan
- String, merupakan teks biasa pada umumnya, penulisannya harus menggunakan tanda petik datu ataupun dua. Contoh:
content: 'Lorem ipsum';
- Keyword, merupakan kata-kata tertentu yang digunakan tidak menggunakan tanda petik. Contoh:
content: lorem ipsum;
- Url, merupakan properties alamat url yang digunakan jika Anda menggunakan gambar sebagai background atau ikon. Penulisan tidak menggunakan tanda petik. Contoh:
content: url(/wp-content/uploads/2018/03/image.png);
Selain itu kedua selektor ini termasuk kategori inline element, sama seperti <span>, <i> dan lain sebagainya, sehingga secara default tidak memiliki dimensi. Dengan demikian jika ingin menggunakan kedua selektor ini Anda harus mendefinisikan display untuk elemen yang akan diseleksi. Anda dapat menggunakan display:block, inline-block, table atau table-cell.
Contoh penggunaan selektor ::before dan :after
See the Pen Selektor before dan after by Pram Eko (@pram-eko) on CodePen.
