☰

CSS 取り消し線がテキストと異なる色ですか? 質問する

tag-icon • tag-icon html css
CSS 取り消し線がテキストと異なる色ですか? 質問する

HTML 要素del、strike、 はsすべて、テキストの取り消し線効果に使用できます。例:

<del>del</del>

....以下が得られます: デル 

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

....与える： ストライク と ストライク

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

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

...次のようにも表示されます: text-decoration:line-through

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

CSS を使用して線の色を変えることはできますか?

ベストアンサー1

はい、追加の折り返し要素を追加することで可能です。外側の要素に希望の取り消し線の色を割り当て、内側の要素に希望のテキストの色を割り当てます。例:

<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も参照) 削除の真の意味を意図している場合は を使用し、そうでない場合は、最初の例のように CSSで要素またはスタイル<del>を使用することが推奨されます。<s>text-decoration

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 にいくつかの設定が 必要になるようです が、FF および WebKit ベースのブラウザでは必要ありません。) <a> :hover

おすすめ記事