The HTML elements del
, strike
, or s
may all be used for a text strike-through effect. Examples:
<del>del</del>
….gives: del
<strike>strike</strike> and <s>strike</s>
….gives: strike and strike
The CSS text-decoration
property with a value line-through
may be used similarly. The code…
<span style='text-decoration:line-through'>
text-decoration:line-through
</span>
…will also render to look like: text-decoration:line-through
However, the strikethrough line is typically the same color as the text.
Can CSS be used to make the line a different color?
Best Answer
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:
...or...
(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 withtext-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:href
be set on the<a>
before:hover
has an effect; FF and WebKit-based browsers do not.)