Tulisan Dicoret (Double) – HTML CSS

Membuat tulisan di coret pada HTML CSS secara defaultnya hanya dengan satu garis coretan saja, itu sudah biasa. Lalu bagaimana cara membuatnya garis coretannya double ? Mari simak cara membuatnya dibawah ini.

Pertama-tama, siapkan kalimatnya atau kata yang akan dicoret, misalnya tulisan umum tanpa tag apapun. Untuk membuat double strikethrough seperti ini perlu sedikit tambahan elemen diantara tulisan yang akan dicoretnya misalnya menggunakan span class dan div class.

Selain itu, setidaknya perlu memahami sedikit tentang position:relative; dan position:absolute;, lihat disini jika ingin mempelajarinya.

Buatlah span class diantara tulisan yang akan dicoret dan buatlah div class didalam span class diawal sebelum tulisan yang dicoret, seperti ini:

Ini adalah contoh <span class="double"><div class="coret"></div>
tulisan dicoret</span>

Dari classclass diatas, kita akan membuatnya relative dan absolute. Jadi, sebenarnya tidak hanya tulisan dikurung saja yang dicoret tapi bisa juga tulisan diluar class tersebut tinggal di tentukan saja mana yang mau dicoret.

Selanjutnya, tulis code berikut di bagian CSS:

span.double {
  position: relative;
}

span.double div.coret {
   position: absolute;
   top: 10px;
   border-top: 3px double #000;
   width: 100%;
   height: 100%;
}

Save dan lihat hasilnya, berhasil muncul 2 coretan tapi tidak sesuai ?

Kalian dapat mengatur tulisan mana yang dicoret dengan mengubah / menggeser posisi coretannya, caranya dengan mengatur top dan bisa tambahkan left: jika diperlukan. Contoh: top:10px left: 15px, silahkan atur sesuai keperluan.

HTML & CSS
Komentar (0)
Tambah Komentar