Membuat Text-Underline Padding-Bottom

Advertisement

Selamat datang kembali pembaca setia indonesiakode, sudah lama sekali kita tidak membuat postingan terbaru untuk dibaca. Tetapi, pada hari ini kita akan mengupdate artikel mengenai cara membuat href text-underline hover seperti ada padding-bottomnya .

Demo text-underline bottom

Text-underline kerap sekali kita lihat pada website  maupun blog yang kegunaanya untuk menandai href tersebut supaya dapat mudah dibaca, coba bayangkan jika href kita text-decoration:none hasilnya adalah href tersebut malah seperti sepi / tidak ramai, tetapi untuk mengatasi hal tersebut kita juga bisa pergunakan :active, :visited  .

Advertisement

Text-decoration dengan padding-bottom kali ini bukan berarti text-decoration tersebut kita kasih padding melainkan kita akali dengan salah satu cara paling mudah yaitu dengan membuat kode seperti berikut :
Sebagai contoh kita membuat elemen href dengan attribut #link, cssnya berarti :

Advertisement

#link{text-decoration:none;color:grey;}

#link:hover{
border-bottom:1px solid grey;
padding-bottom:2px;
text-decoration:none;
color:#000;
}

Ya kita menambahkan property border-bottom kita kasih value 1px dan diikuti dengan padding-bottom:2px dan jangan lupa dengan mematikan default text-decoration dengan attribut none lah dari tersebut kita seolah - olah kita membuat text-decoration:underline padding bukan ?
Semoga bermanfaat,
Hafid,

Advertisement