概要

最近ToDoリスト的なものを作っていて、完了したアイテムに取り消し線を引きたいと思いました。
単純に<del>やtext-decoration: line-throughを使用すれば取り消し線を付けられますが、この方法だと文字の上にしか線が引かれず、ちょっとかっこわるい感じになってしまいます。
そこで、要素全体に取り消し線を引く方法を考えました。

※以下の図でいうと、「サンダル」のように線を引きたい。（「ヨット」のように、文字の上にだけ線が引かれるのは嫌！）

試行錯誤の結果、とりあえずそれっぽいものが作れたので共有します。

結論

※2020/5/4: 疑似要素afterを使用するよう変更しました。

See the Pen strikethrough4 by kota (@kota_ad) on CodePen.

background: linear-gradient()を使用して取り消し線のように見せました。

解説

linear-gradient()は、線形グラデーションを作成する関数です。今回はこれを背景に指定しました。
線形グラデーションによって、中央部分だけを黒に、それ以外の部分は透明にすることで、取り消し線（っぽいもの）を作っています。

linear-gradient()の引数には、色と、その色に変化する位置を指定します。
今回は以下のように指定したので、
　上から47%の位置まで透明（transparent）、
　上から47%の位置から52%の位置まで黒（#000000）、
　上から52%の位置以降透明（transparent）、
となります。
（なかなか複雑な関数なので、色々説明を省いています。厳密な説明は他サイトを見てください。）

  background: linear-gradient(
    transparent 47%,
    #000000 47%,
    #000000 52%,
    transparent 52%
  );

※2020/5/4: 疑似要素afterを使用するよう変更したため追記しました。
また、取り消し線は疑似要素afterを使用して、取り消す要素の上に重ねています。
疑似要素を使用しなくても取り消し線は引けますが、以下の図のように文字の裏に線が引かれてしまうため、疑似要素を使用しました。

追伸

もっといい方法がある気がしてならない。いい方法あったら教えてください。