☰

CSSで斜めに取り消し線を引く方法 質問する

tag-icon • tag-icon html css image strikethrough
CSSで斜めに取り消し線を引く方法 質問する

次のようなものが必要です:

これを CSS で実現するにはどうすればよいでしょうか。背景画像を使用する方法があることは知っていますが、画像なしで CSS のみでこれを実現できますか。

ベストアンサー1

疑似要素を使用してこれを行うハッキーな方法があります:before。境界線を付け:before、CSS 変換を使用して回転させます。この方法では、DOM に余分な要素が追加されず、取り消し線の追加/削除はクラスの追加/削除と同じくらい簡単です。

デモはこちら

注意点

  • これはIE8までしか動作しません。IE7サポートしていません:beforeただし、ブラウザによっては、するサポートします:beforeが、CSS 変換はサポートしません。
  • 回転角度は固定です。テキストが長い場合、線がテキストの角に触れなくなります。この点に注意してください。

CS

.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>

おすすめ記事