Mari kita berbicara sedikit tentang HTML. Anda tahu tag <del>?
Tag <del> menunjukkan bagian dokumen yang telah dihapus (deleted). Hampir semua browser menampilkannya dengan dekorasi "line-trough" untuk menunjukkan bahwa konten tersebut sudah dihapus.
Kita bicara masalah visual, line-through bisa jadi tampil baik-baik saja pada font berukuran kecil (bodycopy), tapi bisa jadi bermasalah pada font berukuran besar. Sederhana saja, tidak proporsional.
Kita bisa memberikan sedikit kustomisasi dengan menggunakan CSS Pseudo-element. Biar tidak bingung, boleh cek dulu demonya disini.
Kita bisa memulainya dengan mengatur class untuk tag <del>
del {
text-decoration:none; /*-- menghilangkan "line-trough" -- */
position:relative;
}
Untuk membuat seperti pada contoh no 3 kita perlu pseudo-element
del:before {
content:"";
display:block;
width:100%;
height:5px; /*-- ketebalan garis --*/
background:rgba(255,0,0,0.5);
position:absolute;
top:0.5em;
}
Maka akan muncul garis merah setebal 5px, kita bisa mengkustomisasikan warna, ketebalan dan transparansinya. Kitapun bisa sedikit berkreasi dengan mengganti garis melintang biasa menggunakan tanda silang (contoh no 4).
del:before {
content:"";
display:block;
width:100%;
height:5px;
background:rgba(255,0,0,0.5);
position:absolute;
top:0.5em;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
}
del:after {
content:"";
display:block;
width:100%;
height:5px;
background:rgba(255,0,0,0.5);
position:absolute;
top:0.5em;
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
}
Sekarang tampilan tag <del> sepertinya sudah lebih menarik. Masih kurang menarik? Silahkan berkreasi. :D