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.


Jangan Lupa Share !!!

37
7 shares, 37 points

Apa Reaksimu ?

Bingung Bingung
6
Bingung
Kesal Kesal
4
Kesal
OMG OMG
6
OMG
Takut Takut
5
Takut
Keren Keren
3
Keren
Sedih Sedih
8
Sedih
Posciety Tech

Advanced Competent

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

0 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