ansaurus

Question

CSS strikethrough different color from text?

Answer 1

+20 A:

Yes, by adding an extra wrapping element. Assign the desired line-through color to an outer element, then the desired text color to the inner element. For example:

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

...or...

   <strike style='color:red'>
    <span style='color:black'>black with red strikethrough<span>
   </strike>

To make the strikethrough appear for a:hover, an external stylesheet must be used. (The :hover pseudo-class can't be applied with inline styles.) For example:

<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 seems to require some 'href' be set on the <a> before :hover has an effect; FF and webkit-based browsers do not.)

gojomo 2009-07-10 03:36:07

+1 I am delighted this works.

Thomas L Holaday 2009-07-10 03:42:58

So much for my "that's impossible!" answer.

John Kugelman 2009-07-10 03:43:31

Can this be done for a:hover?

tharkun 2009-07-12 13:50:37

Yes, in my tests in FF3+, IE7+, Chrome. See added section, above.

gojomo 2009-07-12 19:41:21

Answer 2

A:

Brilliant! Thank you.

John 2010-04-11 21:29:14

ansaurus

tags:

views:

answers:

CSS strikethrough different color from text?

related questions