Quantcast
Channel: CSS strikethrough different color from text? - Stack Overflow
Viewing all articles
Browse latest Browse all 17

Answer by gojomo for CSS strikethrough different color from text?

$
0
0

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>

(Note, however, that <strike> is considered deprecated in HTML4 and obsolete in HTML5 (see also W3.org). The recommended approach is to use <del> if a true meaning of deletion is intended, or otherwise to use an <s> element or style with text-decoration CSS as in the first example here.)

To make the strikethrough appear for a:hover, an explicit stylesheet (declared or referenced in <HEAD>) must be used. (The :hover pseudo-class can't be applied with inline STYLE attributes.) 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.)

Viewing all articles
Browse latest Browse all 17

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>