CSS取り消し線はテキストと異なる色ですか？

268

HTML要素はdel、strike、またはsすべてのテキスト裏抜け効果のために使用することができます。例：

<del>del</del>

....与えます： デル

<strike>strike</strike> and <s>strike</s>

.... gives：ストライキとストライキ

text-decoration値を持つCSS プロパティline-throughも同様に使用できます。コード...

<span style='text-decoration:line-through'>
    text-decoration:line-through
</span>

...また、次のようにレンダリングされます：text-decoration：line-through

ただし、取り消し線は通常、テキストと同じ色です。

CSSを使用して線を別の色にすることはできますか？

html  css 
— 五条
ソース
— web-tiki

回答:

408

はい、追加の折り返し要素を追加します。目的の線の色を外側の要素に割り当て、次に目的のテキストの色を内側の要素に割り当てます。例えば：

<span style='color:red;text-decoration:line-through'>
  <span style='color:black'>black with red strikethrough</span>
</span>
スニペットを展開

...または...

<strike style='color:red'>
  <span style='color:black'>black with red strikethrough<span>
</strike>
スニペットを展開

（注、しかし、それが<strike>されHTML4で非推奨とHTML5で廃止されたと考えられ（もW3.orgを参照してください）。推奨されるアプローチは、使用することです<del>削除の本当の意味が意図されている場合、またはそれ以外に使用する<s>と要素やスタイルtext-decorationのようにCSSをここの最初の例です。）

取り消し線をa：hoverに表示するには、明示的なスタイルシート（で宣言または参照<HEAD>）を使用する必要があります。（:hover疑似クラスはインラインSTYLE属性では適用できません。）例：

<head>
  <style>
    a.redStrikeHover:hover {
      color:red;
      text-decoration:line-through;
    }
  </style>
</head>
<body>
  <a href='#' class='redStrikeHover'>
    <span style='color:black'>hover me</span>
  </a>
</body>
スニペットを展開
（IE7 hrefは<a>以前に設定する必要:hoverがあるようですが、FFおよびWebKitベースのブラウザーでは効果がありません。）

— 五条
ソース
8
私にとっては「それは不可能です！」回答。
— John Kugelman、
1
jqueryの実装は非常に便利です。
— yakunins
38
@utypeなぜこれにjQueryを使用するのですか？
— kapa
4
ラッパー要素は少々吸います。ほとんどの場合、単純な疑似要素、つまりdel { position:relative }、でほぼ同じ効果を得ることができますdel::after { content:'', position:absolute; top: 50%; left: 0; right:0; border-bottom: 1px solid #f00 }。
— 具現化
2
単なるラッパー。独創的。あらまあ、それは私が思いついたすべてのもの（疑似要素）よりも優れています。よくやった！
— CunningFatalist 2014
69

2016年2月現在、CSS 3は以下のサポートを提供しています。これは、WooCommerceの単一の商品ページのスニペットで、価格割引があります

/*Price before discount on single product page*/
body.single-product .price del .amount {
color:           hsl(0, 90%, 65%);
font-size:       15px;
text-decoration: line-through;
/*noinspection CssOverwrittenProperties*/
text-decoration: white double line-through; /* Ignored in CSS1/CSS2 UAs */
}

その結果： テキスト装飾の例

CSS 3は、text-decoration-colorプロパティを使用して直接サポートする可能性があります。特に：

text-decoration-colorCSSプロパティは、下線、overlinesを描く、または取り消し線で指定されたときに使用される色を設定しますtext-decoration-line。これは、他のHTML要素の組み合わせを使用するよりも、これらのテキスト装飾に色を付けるために推奨される方法です。

text-decoration-colorCSS 3ドラフト仕様も参照してください。

このメソッドをすぐに使用したい場合は、を使用して、プレフィックスを付ける必要があります-moz-text-decoration-color。（-moz-上位互換性のため、なしで指定することもできます。）

— かたつむり
ソース
2
「CSS 3の可能性が高い」はむしろ楽観的です。
— BoltClock
5
@BoltClock：それはどのように楽観的ですか？W3Cワーキングドラフトには既に含まれており、積極的に追求されています。
— メカニカルカタツムリ
2
caniuseによると、現在（2014年）text-decoration-colorにプレフィックスなしでサポートしているブラウザーはありません。
— Blazemonger、2014年
4
そして3年後... FirefoxとSafariには20％のリーチがあります。
— アンドレ・Werlang
1
カニウスによると、現在はFireFoxでのみサポートされています
— YakovL 2017年
35

空の:after要素を使用して、1つの境界線を装飾しました。CSS変換を使用して、斜線のために回転させることもできます。結果：純粋なCSS、追加のHTML要素なし！欠点：IMOではテキストの大きなブロックに取り消し線を使用すべきではありませんが、複数行にまたがることはありません。

s,
strike {
  text-decoration: none;
  /*we're replacing the default line-through*/
  position: relative;
  display: inline-block;
  /* keeps it from wrapping across multiple lines */
}

s:after,
strike:after {
  content: "";
  /* required property */
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 2px solid red;
  height: 45%;
  /* adjust as necessary, depending on line thickness */
  /* or use calc() if you don't need to support IE8: */
  height: calc(50% - 1px);
  /* 1px = half the line thickness */
  width: 100%;
  transform: rotateZ(-4deg);
}
<p>Here comes some <strike>strike-through</strike> text!</p>
スニペットを展開

— ブレイズモンガー
ソース
@Veve HTML取り消し線要素 -非セマンティックバージョン
— Blazemonger 2015年
1
おかげで、私はこれ、特に回転線を探しました
— hanan-mstudio '19 / 07/19
使用：この方法は、アクセシビリティの問題持っている可能性があります後
— ewanm89
9

Internet Explorer \ edgeを気にしない場合、取り消し線の色を変える最も簡単な方法は、CSSプロパティを使用することです。text -decoration-colorとtext-decoration：line-through;

.yourClass {
    text-decoration: line-through !important;
    text-decoration-color: red !important;
}

-Edge \ Internet Explorerでは機能しません

— Rohin Tak
ソース
7

このCSS3を使用すると、プロパティを簡単に確認でき、問題なく機能します。 

span{
    text-decoration: line-through;
    text-decoration-color: red;
}
— ヴィシュヌSR
ソース
6

@gojomoに追加する:afterと、追加の要素に疑似要素を使用できます。唯一の注意点は、CSSの機能が制限されているためinnerText、data-text属性でを定義する必要があることですcontent。

s {
  color: red;
  text-align: -1000em;
  overflow: hidden;
}
s:after {
  color: black;
  content: attr(data-text);
}
<s data-text="Strikethrough">Strikethrough</s>
スニペットを展開

— イボルモ
ソース
5

これは、グラデーションを使用してラインを偽造するアプローチです。複数行のストライキで動作し、追加のDOM要素を必要としません。しかし、背景のグラデーションなので、テキストの背後にあります...

del, strike {
  text-decoration: none;
  line-height: 1.4;
  background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.63em, transparent), color-stop(0.63em, #ff0000), color-stop(0.7em, #ff0000), color-stop(0.7em, transparent), to(transparent));
  background-image: -webkit-linear-gradient(top, transparent 0em, transparent 0.63em, #ff0000 0.63em, #ff0000 0.7em, transparent 0.7em, transparent 1.4em);
  background-image: -o-linear-gradient(top, transparent 0em, transparent 0.63em, #ff0000 0.63em, #ff0000 0.7em, transparent 0.7em, transparent 1.4em);
  background-image: linear-gradient(to bottom, transparent 0em, transparent 0.63em, #ff0000 0.63em, #ff0000 0.7em, transparent 0.7em, transparent 1.4em);
  -webkit-background-size: 1.4em 1.4em;
  background-size: 1.4em 1.4em;
  background-repeat: repeat;
}

フィドルを参照してください：http : //jsfiddle.net/YSvaY/

グラデーションカラーストップと背景サイズは、行の高さに依存します。（後で計算にLESSを使用し、オートプレフィックスを使用しました...）

— シンボ
ソース
3

私の経験では

<span style='color:red;text-decoration:line-through'>
    <span style='color:black'>black with red strikethrough</span>
</span>

最良の選択肢ではありません。私は同僚にクロスブラウザーをテストせずにこの方法を使用させたため、Firefoxで問題が発生したため、戻って修正する必要がありました。私の個人的な推奨事項は、：afterセレクターを使用して取り消し線を作成することです。そうすれば、他のすべてのブラウザー間で同様に、スタイルの競合なしに確実にしたい場合、IE8に戻すことができます。

また、マークアップが少なくなり、私の意見ではかなり重要なスタイリングとほぼ同じ量が作成されます。

他の誰かが同様の問題に遭遇した場合、うまくいけばこれは助けになるでしょう：

.lineThrough {
    position: relative;

   &:after {
      content: "  ";
      display: block;
      width: 60px;
      height: 1px;
      background: red;
      position: absolute;
      top: 49%;
      left: 50%;
      margin-left: -30px;
   }
}

もちろん、マージンの代わりに変換を使用することもできますが、この例ではIE8に戻ります。

— ブレイディエドガー
ソース
2

Blazemongerの返信（上または下）には投票が必要ですが、十分なポイントがありません。

20px幅のCSS丸いボタン全体に灰色のバーを追加して、「使用不可」を示し、Blazemongerのcssを微調整しました。

.round_btn:after {
    content:"";    /* required property */
    position: absolute;
    top: 6px;
    left: -1px;
    border-top: 6px solid rgba(170,170,170,0.65);
    height: 6px;
    width: 19px;
}
— ブックマーク
ソース
0

親要素に目的のラインスルーカラーを割り当てると、削除されたテキスト要素（<del>）でも機能し、クライアント<del>がラインスルーとしてレンダリングすることを前提とします。

http://jsfiddle.net/kpowz/vn9RC/

— kpowz
ソース
-4

以下はjQuery実装のサンプルです– gojomoの回答とutypeの提案のおかげです（両方に+1）

$(function(){
  //===================================================================
  // Special price strike-out text
  // Usage:
  //   Normally:    <span class='price'>$59</span>
  //   On special:  <span class='price' special='$29'>$59</span>
  //===================================================================
  $(".price[special]").each(function() {
    var originalPrice = $(this).text();
    $(this).html('<strike><span>' + originalPrice +'</span></strike> ' + $(this).attr('special'))
           .removeAttr('special')
           .addClass('special');
  });
});

そのためのCSSは

.price strike, .price.special { color: Red; }
.price strike span { color: Black; }
— アクシミリ
ソース
どの部分が無効ですか？ただし、すべての主要ブラウザで機能しました
— Aximili、2012年
3
「作品」と「有効」はかなり離れています。ブラウザーは、いくつかのエラーがあるHTMLでも解釈しようとします。W3C Markup Validation Serviceを参照してください。なぜ有効なHTMLが誰にとっても重要なのですか？、HTMLの有効なDIV属性？SO
— kapa 2012年
私が間違っていない場合は、属性名を「data-special」に変更すると、有効なHTML5になります。
— Muhd、2012年
13
色付きの取り消し線を取得するラッパーを追加するjQuery？何になっちゃったの？！
— Chris Baker、2012年
3
考えられるXSSの問題のようです：にプレーンテキストがありoriginalPrice、それをHTMLとして挿入します。の.html()代わりに使用してみてください.text()。または、jQueryを使用することもできますwrap()。
— tuomassalo 2012
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.