概要
最近ToDoリスト的なものを作っていて、完了したアイテムに取り消し線を引きたいと思いました。
単純に<del>やtext-decoration: line-throughを使用すれば取り消し線を付けられますが、この方法だと文字の上にしか線が引かれず、ちょっとかっこわるい感じになってしまいます。
そこで、要素全体に取り消し線を引く方法を考えました。
※以下の図でいうと、「サンダル」のように線を引きたい。（「ヨット」のように、文字の上にだけ線が引かれるのは嫌！）
試行錯誤の結果、とりあえずそれっぽいものが作れたので共有します。
結論
※2020/5/4: 疑似要素afterを使用するよう変更しました。
See the Pen
strikethrough4 by cheaps (@cheaps)
on CodePen.
background: linear-gradient()を使用して取り消し線のように見せました。
解説
linear-gradient()は、線形グラデーションを作成する関数です。今回はこれを背景に指定しました。
線形グラデーションによって、中央部分だけを黒に、それ以外の部分は透明にすることで、取り消し線（っぽいもの）を作っています。
linear-gradient()の引数には、色と、その色に変化する位置を指定します。
今回は以下のように指定したので、
上から47%の位置まで透明（transparent）、
上から47%の位置から52%の位置まで黒（#000000）、
上から52%の位置以降透明（transparent）、
となります。
（なかなか複雑な関数なので、色々説明を省いています。厳密な説明は他サイトを見てください。）
background:linear-gradient(transparent47%,#00000047%,#00000052%,transparent52%);※2020/5/4: 疑似要素afterを使用するよう変更したため追記しました。
また、取り消し線は疑似要素afterを使用して、取り消す要素の上に重ねています。
疑似要素を使用しなくても取り消し線は引けますが、以下の図のように文字の裏に線が引かれてしまうため、疑似要素を使用しました。
追伸
もっといい方法がある気がしてならない。いい方法あったら教えてください。
