Kali ini saya akan jelaskan cara membuat tulisan bergaris tengah alias DICORET pada HTML CSS. Bisa kita gunakan tag atau element didalam HTML dan kita juga bisa gunakan property didalam CSS. Cara yang mana yang kalian suka ? Caranya mungkin beda tapi tujuannya tetap sama, tidak ada perbedaan dari hasilnya.

Contoh pertama misalnya saya punya tulisan yang masih polos seperti ini:

<p>ini tutorial membuat garis tengah pada tulisan alias dicoret</p>

Tulisan Dicoret Dengan Tag HTML

Sekarang kita jelaskan dulu tag yang digunakan pada HTML untuk membuat tulisan dicoret, kemudian kita praktekan dengan property CSS nanti dibawah. Untuk membuat tulisan di coret pada HTML, kita memerlukan tag / element atau kalian juga bisa menggunakan tag keduanya sama saja hasilnya.

Saya akan mencoret tulisan “membuat garis tengah pada” pada tulisan tersebut dengan tag < strike>: <p>ini tutorial <strike>membuat garis tengah pada</strike> tulisan alias dicoret</p>maka hasilnya akan menjadi “ini tutorial membuat garis tengah pada tulisan alias di coret“.

Tulisan Dicoret Dengan CSS

Nah, sekarang property apa yang digunakan kalo kalian mau menggunakan CSS ? Kita hanya memerlukan text-decoration: line-through seperti ini:

p {
    text-decoration: line-through
}

Karena pada HTML yang saya buat ini hanya ada tag <p>, maka saya langsung tulis p aja pada CSS nya. Artinya keseluruhan tulisan yang ada di tag p akan dicoret atau bergaris tengah, silahkan dicoba!

Sekarang, kalo tidak mau keseluruhan tag <p> nya di coret menggunakan CSS maka harus buat dulu tag lain atau class atau id (misalnya span class”coret”) didalamnya yang nantinya dipanggil di CSS untuk dicoret seperti diatas dengan cara / kode yang sama seperti diatas. Dengan begitu hanya tulisan yang ada didalam class coret yang akan dicoret yang lainnya normal.

Masih bingung ? Tonton: Video Tutorial cara membuat tulisan dicoret (bergaris tengah).

Selamat mencoba !

Mau mempelajari lebih banyak tentang HTML & CSS ? Kunjungi kategori HTML CSS di riobermano.com.