Tulisan Bergaris Tengah (Dicoret) – HTML CSS

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.

tunggu sebentar...
POS Lainnya:

3
Tinggalkan Komentar

avatar
Resta
Visitor
Resta

Thanks om,
mantap

Cari Domain
Visitor
Cari Domain

Kalo membuat tulisan coret 2 garis gmn mas?
maksudnya coretannya itu 2 garis
bisa gak ya mas?

Gita Sukma
Visitor
Gita Sukma

Makasih kak

Situs ini menggunakan Cookie untuk meningkatkan pengalaman setiap pengunjung SETUJU & TUTUP Lihat Privasi