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!
Bagikan[](https://twitter.com/share?text=Snippet Membuat Gradient Underline&url=https://blog.naufaldi.com/membuat-gradient-underline/ "Twitter")[](https://www.linkedin.com/shareArticle?mini=true&url=https://blog.naufaldi.com/membuat-gradient-underline//&title=Snippet Membuat Gradient Underline "LinkedIn")
[
Menggunakan AOS Animation Library di NextJS
Problem Sebelumnya, saya menggunakan Framer Motion untuk membuat animation di Web Apps…
22 Jun 2021
](/menggunakan-wowjs-dan-anime/)[
Add Meta Description on NextJS
Meta description adalah salah satu hal yang cukup vital dalam dunia website,…
18 Jun 2021
](/add-meta-description-on-nextjs/)