Pada kesempatan kali ini saya akan menjelaskan cara membuat judul text berbeda warna dengan before dan after css. Perlu teman-teman ketahui sebelumnya, untuk membuat judul text website atau judul text artikel di website menjadi beberapa warna didalam satu kalimat bisa memanfaatkan pseudo element ::before dan ::after. Namun pada contoh disini hanya bisa membuat 3 warna yang saling berbeda didalam satu kalimat text. Seperti contoh disini, saya memiliki judul text artikel Cara Membuat Judul Text Berbeda Warna Dengan Before Dan After CSS. Dan seperti yang teman-teman lihat pada text tersebut dimana satu kalimat dalam judul artikel tersebut dikombinasikan menjadi tiga warna yaitu merah, biru dan hijau. Dan dari ketiga warna tersebut kalian bisa menerapkan warna merah dan hijau didalam pseudo element ::before dan ::after tergantung pada posisi warna di kalimat tersebut dan warna yang posisinya paling tengah ditempatkan di induk selector tersebut dan untuk warna sebelum atau sesudahnya bisa diterapkan di ::before atau ::after.

Berikut Tahapannya :

  • Teman-teman buat terlebih dahulu satu buah file dengan nama index.html
  • Ketikan kode seperti berikut :

  • Jika sudah save terlebih dahulu file tersebut
  • Dan lihat hasilnya di browser

Sampai disini penjelasan saya mengenai cara membuat judul text berbeda warna dengan before dan after css, semoga bermanfaat.