Husni Kamal
Crash Team Racing Pro Player (Drift). Blue fire addict. Had beaten Oxide and Emperor Velo XXVII in some time trial track. Tetris Pro Player. Rank #2 in Bandung.

Underline Hover

Sedikit mendokumentasikan tentang beberapa hal teknis yang ada di dunia front-end developer, yang terkadang sangat sepele, namun susah untuk dicari.

Dokumentasi kali ini adalah tentang css, dimana ketika kita hover atau mengarahkan mouse ke suatu tag atau element tertentu, akan muncul garis bawah/underline. Simple saja coding-nya.

Code Section

Langsung saja, pertama-tama kita buat terlebih dahulu tag/element-nya.

<p class="underline">
  Husni Kasep
</p>

Lanjut ke CSS-nya.

.underline {
  display: inline-block;
  position: relative;
  color: #FAFAFA;
}
.underline::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: -2px;
  left: 0;
  background-color: #000;
  transform-origin: bottom right;
  color: #FAFAFA;
}
.underline:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

Nuhuns~

Photo by Pankaj Patel on Unsplash
Share

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *