BinaryDevelop
  1. ホーム
  2. ハイパーリンク

[解決済み】CSSの取り消し線はテキストと違う色？

2022-03-29 08:36:37

質問

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

<del>del</del>

...くれる。 デル 

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

...くれる。 そして ストライク

CSSの text-decoration プロパティに、値 line-through も同様に使用することができます。コードは... 

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

...のようなレンダリングも行われます。 <ストライク テキスト装飾:ラインスルー

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

CSSで線の色を変えることはできますか？

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

そうです、ラップ要素を追加することです。外側の要素に希望のラインスルーカラーを割り当て、内側の要素に希望のテキストカラーを割り当てます。たとえば、以下のようになります。 

<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ベースのブラウザは効果がありません)。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します