CSS: membuat garis bawah pendek pada headline

CSS: membuat garis bawah pendek pada headline

Sebelumnya mohon maaf, saya juga bingung mau ngasih judul apa, wkwk. Pokoknya maksud saya adalah ingin membuat headline(h1/h2/h3/ dst) seperti dibawah ini

Headline seperti ini sering dijumpai di landing page atau pada halaman detail product. Tentu kita tidak bisa hanya mengaplikasikan underline untuk jenis headline ini, karena underline akan membuat garis bawahnya memiliki ukuran yang sama dengan panjang text.

Akan tetapi kita bisa menggunakan pseudo element untuk trik ini.

Jadi dalam css tersebut, kita menyisipkan element dengan lebar 10px setelah content pada element h2.

Dan jadilah garis bawah pendek.

 

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *