Snippet Membuat Gradient Underline

Masalah

Beberapa hari kemarin, saya mendapatkan tugas untuk membuat sebuah warna gradient dari project. Project tersebut ternyata memerlukan underline namun warnanya haruslah gradient. Bukan single color. Sebenarnya, saya sendiri baru pertama kali ini juga mendapatkan pengalaman dalam membuat underline pada text untuk menjadikannya gradient.

Sayangnya, kita tidak bisa secara langsung untuk membuat sebuah gradient pada property css text-decoloration-color karena tidak mendukung untuk membuat sebuah gradient warna pada property tersebut. Sehingga kita harus menggunakan jalan lain untuk bisa archievment untuk membuat gradient. Hasil jadinya kurang lebih nanti seperti ini :

Codepen Underline Gradient

Solusi

Prinsipnya adalah kita membuat sebuah background dengan menggunakan pseudo-element dengan menggunakan ::after lalu memberikannya position:absolute . Agar posisinya lebih tepat, kita memberikan position:relative pada element parent atau element yang akan kita berikan underline gradient.

Jangan lupa memberikan property content dan width untuk lebar background sesuai dengan parentnya. Karena kita memberikan background berupa linier-gradient sebagai lokasi gradient color kita.

Kodenya bisa teman-teman dapatkan di tautan codepen diatas. Semoga membantu!