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.

h2 {
    text-align: center;
}
h2:after {
    content:'';
    display: block;
    width: 30px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    border-bottom: 1px solid #e62129;
}

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

Dan jadilah garis bawah pendek.

 

Leave a Reply

%d bloggers like this: