Kumpulan Efek Underline Text CSS untuk Blog dan Cara Pasangnya

anaksmanda.com - Tautan dan teks penting di blog sering kali dibedakan dengan garis bawah. Supaya tampilannya tidak membosankan, garis bawah itu bisa diberi animasi sederhana saat kursor diarahkan. Di artikel ini kalian akan menemukan kumpulan efek underline text menggunakan CSS yang bisa langsung dipasang di blog, lengkap dengan contoh HTML, preview animasi, dan cara memasangnya di Blogger.

Semua efek di bawah menggunakan CSS tanpa JavaScript tambahan, sehingga tetap ringan. Setiap bagian dilengkapi preview yang bisa kalian coba dengan mengarahkan kursor ke teks. Pada bagian akhir, kita juga membahas properti CSS modern untuk mengatur ketebalan dan jarak garis bawah serta beberapa catatan aksesibilitas.

Contoh efek garis bawah animasi yang bisa dipasang di blog.

Daftar Efek Underline yang Dibahas

Cara Kerja Efek Underline Animasi

Ada dua teknik utama yang dipakai. Pertama, properti text-decoration yang menghasilkan garis bawah bawaan browser. Teknik ini sederhana, tetapi animasi gerakannya terbatas. Kedua, pseudo-element ::after yang diposisikan di bawah teks. Lebar atau transformasi elemen tersebut diubah saat :hover dengan bantuan transition.

Kalau kalian masih asing dengan selector, pseudo-class, atau properti posisi, baca juga CSS Dasar Bagian 1 dan CSS Dasar Bagian 2.

1. Underline Standar Saat Hover

Efek paling dasar: teks tampil tanpa garis, lalu garis bawah muncul ketika kursor diarahkan. Cocok untuk tautan di dalam paragraf atau elemen yang tidak memerlukan animasi garis kompleks.

.standar-u {
  text-decoration: none;
}

.standar-u:hover,
.standar-u:focus-visible {
  text-decoration: underline;
  text-underline-offset: 4px;
}

2. Animasi Garis dari Atas ke Bawah

Efek ini membuat garis terlihat muncul dari arah atas menuju bawah. Versi preview menggunakan transformasi skala agar gerakannya halus tanpa mengubah tinggi elemen.

.animasi-top-bottom {
  display: inline-block;
  position: relative;
  padding-bottom: 5px;
}

.animasi-top-bottom::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: #16A085;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .35s ease;
}

.animasi-top-bottom:hover::after,
.animasi-top-bottom:focus-visible::after {
  transform: scaleY(1);
}

3. Animasi Garis dari Bawah ke Atas

Kebalikan dari efek sebelumnya. Garis tumbuh dari bawah menuju atas. Teknik ini memakai transform-origin: bottom agar arah animasi dapat diatur secara konsisten.

.animasi-bottom-top {
  display: inline-block;
  position: relative;
  padding-bottom: 5px;
}

.animasi-bottom-top::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: #16A085;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .35s ease;
}

.animasi-bottom-top:hover::after,
.animasi-bottom-top:focus-visible::after {
  transform: scaleY(1);
}

4. Animasi Garis dari Kiri ke Kanan

Efek populer untuk menu navigasi. Lebar garis berubah dari nol menjadi penuh sehingga terlihat seperti digambar dari sisi kiri teks.

.animasi-left-right {
  display: inline-block;
  position: relative;
  padding-bottom: 5px;
}

.animasi-left-right::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 3px;
  background: #16A085;
  transition: width .35s ease;
}

.animasi-left-right:hover::after,
.animasi-left-right:focus-visible::after {
  width: 100%;
}

5. Animasi Garis dari Kanan ke Kiri

Prinsipnya sama dengan efek sebelumnya, tetapi titik awal garis berada di sisi kanan. Lebar garis bertambah ke arah kiri ketika kursor diarahkan ke teks.

.animasi-right-left {
  display: inline-block;
  position: relative;
  padding-bottom: 5px;
}

.animasi-right-left::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0;
  height: 3px;
  background: #16A085;
  transition: width .35s ease;
}

.animasi-right-left:hover::after,
.animasi-right-left:focus-visible::after {
  width: 100%;
}

6. Animasi Garis dari Tengah ke Samping

Garis muncul dari tengah, kemudian melebar ke kiri dan kanan secara bersamaan. Efek ini cocok untuk judul, tautan unggulan, atau menu dengan tampilan minimalis.

.animasi-middle {
  display: inline-block;
  position: relative;
  padding-bottom: 5px;
}

.animasi-middle::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: #16A085;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .35s ease;
}

.animasi-middle:hover::after,
.animasi-middle:focus-visible::after {
  transform: scaleX(1);
}

Contoh Penggunaan di HTML

Setelah CSS terpasang, kalian cukup menambahkan nama class ke elemen yang diinginkan. Pastikan nama class pada HTML sama persis dengan yang didefinisikan di CSS.

<!-- Tautan di dalam paragraf -->
<p>
  Baca juga
  <a class="standar-u" href="https://contoh.com/css">
    tutorial CSS dasar
  </a>
  sebelum mulai.
</p>

<!-- Menu navigasi -->
<nav>
  <a class="animasi-left-right" href="/">Beranda</a>
  <a class="animasi-left-right" href="/search/label/CSS">CSS</a>
  <a class="animasi-middle" href="/p/kontak.html">Kontak</a>
</nav>

Untuk efek yang menggunakan ::after, elemen perlu memiliki position: relative dan biasanya display: inline-block. Dengan begitu, garis dapat mengikuti lebar teks dan berada di posisi yang tepat.

Menyesuaikan Warna, Ketebalan, dan Kecepatan Animasi

Kode di atas dapat disesuaikan dengan tema blog. Ada tiga bagian yang paling sering diubah:

• Warna garis: ubah nilai background atau background-color, misalnya menjadi #e53935.
• Ketebalan garis: ubah nilai height. Ketebalan 2px sampai 3px biasanya cukup jelas.
• Kecepatan: ubah durasi pada transition. Nilai 0.2s sampai 0.4s biasanya terasa responsif.

Jika ingin garis sedikit lebih jauh dari teks, ubah nilai bottom atau padding-bottom. Uji perubahan satu per satu agar mudah mengetahui bagian mana yang memengaruhi tampilan.

Cara Memasang di Blogger

1. Masuk ke dasbor Blogger dan pilih menu Tema.
2. Buat cadangan tema sebelum mengubah kode.
3. Pilih opsi Edit HTML dan cari bagian </b:skin>.
4. Tempel CSS efek yang ingin digunakan tepat sebelum </b:skin>. Jika tema tidak memakai bagian tersebut, letakkan kode di dalam tag <style> sebelum </head>.
5. Simpan tema, lalu tambahkan class pada tautan atau elemen melalui editor postingan dalam mode HTML.
6. Buka pratinjau dan uji efek di desktop serta perangkat seluler.

Langkah serupa dapat digunakan saat memasang tombol download di Blogger menggunakan CSS.

Tips Modern: Mengatur Garis Bawah Tanpa Pseudo-Element

CSS modern memiliki properti untuk mengatur garis bawah bawaan. Teknik ini cocok untuk tautan dalam paragraf panjang karena garis tetap mengikuti teks meskipun teks membungkus ke baris berikutnya.

.link-modern {
  text-decoration: underline;
  text-decoration-color: #e53935;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition:
    text-underline-offset .2s ease,
    text-decoration-color .2s ease;
}

.link-modern:hover,
.link-modern:focus-visible {
  text-underline-offset: 7px;
  text-decoration-color: #1e88e5;
}

Properti text-decoration-thickness mengatur ketebalan garis, sedangkan text-underline-offset mengatur jarak garis dari teks. Cara ini lebih praktis untuk tautan di dalam paragraf daripada membuat garis menggunakan pseudo-element.

Bonus: Underline Animasi dengan Background Gradient

Teknik ini menggunakan background-size sehingga garis tampak tumbuh saat kursor diarahkan ke teks. Efek ini juga dapat diterapkan pada tautan yang terdiri dari beberapa baris.

.link-gradient {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 2px;
  transition: background-size .3s ease;
}

.link-gradient:hover,
.link-gradient:focus-visible {
  background-size: 100% 2px;
}

Catatan Aksesibilitas

• Jangan hilangkan garis bawah pada semua tautan isi artikel. Pembaca yang kesulitan membedakan warna dapat mengandalkan garis bawah untuk mengenali tautan. Efek yang hanya muncul saat hover lebih cocok untuk menu.
• Tambahkan gaya fokus. Gunakan :focus-visible agar pengguna keyboard juga dapat melihat indikator interaksi.
• Perhatikan kontras warna. Pastikan teks dan garis mudah dibedakan dari latar belakang.
• Hormati pengaturan pengurangan gerak. Sebagian pengguna memilih mengurangi animasi melalui pengaturan sistem operasi.

@media (prefers-reduced-motion: reduce) {
  .link-gradient,
  .link-modern,
  .animasi-top-bottom::after,
  .animasi-bottom-top::after,
  .animasi-left-right::after,
  .animasi-right-left::after,
  .animasi-middle::after {
    transition: none;
  }
}

Pertanyaan yang Sering Diajukan

Kenapa efek garis bawah tidak muncul setelah kode dipasang?
Periksa apakah nama class pada HTML sama dengan nama class pada CSS, apakah CSS sudah tersimpan, dan apakah elemen yang memakai pseudo-element sudah memiliki posisi yang sesuai. Bersihkan cache browser jika perlu.

Di mana meletakkan kode CSS pada tema Blogger?
Umumnya, CSS dapat diletakkan sebelum </b:skin> melalui menu Tema dan Edit HTML. Jika tema tidak menggunakan bagian tersebut, letakkan CSS dalam tag <style> sebelum </head>.

Apakah efek underline animasi memengaruhi kecepatan blog?
Efek ini menggunakan beberapa aturan CSS tanpa JavaScript atau gambar tambahan. Dampaknya terhadap waktu muat biasanya kecil, tetapi tetap hindari menambahkan animasi yang tidak diperlukan.

Efek mana yang paling cocok untuk tautan di dalam artikel?
Gunakan garis bawah yang tetap terlihat, kemudian tambahkan variasi saat hover menggunakan text-underline-offset atau perubahan warna. Efek yang menyembunyikan garis sepenuhnya lebih cocok untuk menu navigasi.

Kesimpulan

Efek underline animasi adalah cara sederhana untuk membuat tampilan blog lebih menarik tanpa menambahkan JavaScript. Kalian bisa memilih garis dari kiri ke kanan, kanan ke kiri, dari tengah, atau menggunakan properti garis bawah modern sesuai kebutuhan.

Pasang CSS di tema Blogger, tambahkan class pada elemen HTML, lalu periksa hasilnya melalui pratinjau. Gunakan efek secara konsisten dan tetap perhatikan aksesibilitas agar tampilan yang menarik juga nyaman digunakan semua pembaca.

Rujukan

• CSS Dasar Bagian 1
• CSS Dasar Bagian 2
• Tombol Download Blogger dengan CSS
• Belajar Dasar HTML