[解決済み] cssで斜め打ちをする方法

質問

このようなものが必要です。

これをCSSで実現するにはどうしたらいいでしょうか？背景画像を使用する方法もありますが、画像を使用せずにCSSのみで実現することは可能でしょうか？

どのように解決するのですか？

これを行うには、ハックする方法があります。 :before 擬似要素を使います。この場合 :before にボーダーを与え、CSS 変換で回転させます。この方法では DOM に余分な要素を追加せず、取り消し線の追加と削除はクラスの追加と削除と同じように簡単に行えます。

以下はデモです。

注意事項

• IE8 までしか動作しません。IE7 はサポートしません。 :before をサポートしていないブラウザでは、劣化が進みます。 する をサポートしているブラウザでは :before をサポートしますが、CSS transforms はサポートしません。
• 回転角度は固定です。文字が長い場合、線が文字の角に触れなくなります。この点に注意してください。

CSS

.strikethrough {
  position: relative;
}
.strikethrough:before {
  position: absolute;
  content: "";
  left: 0;
  top: 50%;
  right: 0;
  border-top: 1px solid;
  border-color: inherit;
  
  -webkit-transform:rotate(-5deg);
  -moz-transform:rotate(-5deg);
  -ms-transform:rotate(-5deg);
  -o-transform:rotate(-5deg);
  transform:rotate(-5deg);
}

HTML

<span class="strikethrough">Deleted text</span>