CSS strikethrough different color from text?

by

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.)

More Related Contents:

  1. CSS Not Being Responsive
  2. When to use IMG vs. CSS background-image?
  3. Li item on two lines. Second line has no margin
  4. Add a background image (.png) to a SVG circle shape
  5. Two inline-block elements, each 50% wide, do not fit side by side in a single row
  6. How do I make an editable DIV look like a text field?
  7. Tables instead of DIVs [duplicate]
  8. Is type=”text/css” necessary in a tag?
  9. Text overflow ellipsis on two lines
  10. Absolute positioning inside absolute position
  11. Use CSS to remove the space between images [duplicate]
  12. Borders disappear in Chrome when I zoom in
  13. How To Isolate a div from public CSS styles?
  14. CSS ONLY Animate Draw Circle with border-radius and transparent background
  15. Bootstrap 4 – Sticky footer – Dynamic footer height
  16. Center HTML Input Text Field Placeholder
  17. CSS – relative positioned parent div not stretching to absolute child div height
  18. html table cell width for different rows [duplicate]
  19. How does the z-index property really work?
  20. Linking to CSS in an SVG embedded by an IMG tag
  21. Understanding grid negative values
  22. HTML + CSS: Numbered list with numbers inside of circles
  23. How to pass parameters to css classes
  24. How to move placeholder to top on focus AND while typing?
  25. Setting max-height for table cell contents
  26. click link below a higher z-index div [duplicate]
  27. Pseudo element not full container width when border used
  28. Setting the image `width: 0` hides it, while `width: 0%` makes it occupy the space, too
  29. How to play CSS3 transitions in a loop?
  30. HTML canvas with scrollbar

Leave a Comment