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.


Jangan Lupa Share !!!

46
3 komentar, 8 shares, 46 points

Apa Reaksimu ?

Bingung Bingung
9
Bingung
Kesal Kesal
7
Kesal
OMG OMG
9
OMG
Takut Takut
8
Takut
Keren Keren
6
Keren
Sedih Sedih
1
Sedih
Posciety Tech

Advanced Competent

Official Channel Posciety.Com yang menyuguhkan informasi dan updates seputar dunia teknologi. Dikelola oleh tim Posciety Tech.

3 Komentar

Pilih Format
Artikel
Default, Membuat Artikel/Cerita
List
Listicle, Misalnya: 3 Hal yang Wajib Dilakukan Saat...
Kuis Kepribadian
Membuat kuis Tentang Kepribadian
Poll
Vote untuk Membuat Keputusan atau Mencari Saran
Meme
Membuat Meme dari Gambar Normal yang Kamu Miliki