Result
こういうやつ。insとdelタグを使用します
フォントやrotateを使う事でリアル感が出せますね。
日本語ならふい字とかまきば、おひさま等がよさ気でしょうか
css
del {
position: relative;
text-decoration: none;
}
del:before {/*削除線*/
content: "";
background: #a30000;
height: 1px;
position: absolute;
left: -3px;
top: 50%;
width: 90%;
transform: rotate(1deg);
}
del:after {/*削除線*/
content: "";
background: #a30000;
height: 1.25px;
position: absolute;
right: 3px;
bottom: 32%;
width: 95%;
transform: rotate(-0.25deg);
}
ins {/*手書き風にして角度を変更 fontは https://fonts.google.com/specimen/Caveat */
color: #a30000;
font-family: 'Caveat', cursive;
font-size: 1.25em;
text-decoration: none;
position: absolute;
margin-top: -20px;
margin-left: -50px;
transform: rotate(-4.5deg);
}
html
<p>The early bird catches <del>the worm</del><ins>less sleep</ins>.</p>
