CSS strikethrough different color from text

Question

The HTML elements del  strike  or s may all be used for a text strike-through effect  Examples   lt del gt del lt  del gt       gives  del  lt strike gt strike lt  strike gt  and  lt s gt strike lt  s gt       gives  strike and strike The CSS text-decoration property with a value line-through may be used similarly  The code     lt span style  text-decoration line-through  gt      text-decoration line-through  lt  span gt      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

User · Answer

Assigning the desired line-through color to a parent element works for the deleted text element (<del>) as well - making the assumption the client renders <del> as a line-through.

http://jsfiddle.net/kpowz/vn9RC/

User · Answer

If it helps someone you can just use css property text-decoration-color  red

User · Answer

In my experience the   lt span style  color red text-decoration line-through  gt       lt span style  color black  gt black with red strikethrough lt  span gt   lt  span gt    isn t the best option  I had a co worker use this method without testing cross browser  so I had to go back and fix it because it caused issues in firefox  My personal recommendation would be to use the  after selector to create a strikethrough  That way it can go back to IE8 if you really wanted to without any style conflicts as well as solid across all other browsers    It also creates less markup and about the same amount of styling which in my opinion is a pretty big deal   So if anyone else runs into similar issues hopefully this can help out    lineThrough       position  relative       amp  after         content              display  block        width  60px        height  1px        background  red        position  absolute        top  49         left  50         margin-left  -30px           obviously you could use transform  translate instead of margins  but this example is to work back to IE8

User · Answer

I ve used an empty  after element and decorated one border on it  You can even use CSS transforms to rotate it for a slanted line  Result  pure CSS  no extra HTML elements  Downside  doesn t wrap across multiple lines  although IMO you shouldn t use strikethrough on large blocks of text anyway    x000D   x000D  s  x000D  strike   x000D    text-decoration  none  x000D      we re replacing the default line-through   x000D    position  relative  x000D    display  inline-block  x000D       keeps it from wrapping across multiple lines    x000D    x000D   x000D  s after  x000D  strike after   x000D    content      x000D       required property    x000D    position  absolute  x000D    bottom  0  x000D    left  0  x000D    border-top  2px solid red  x000D    height  45   x000D       adjust as necessary  depending on line thickness    x000D       or use calc   if you don t need to support IE8     x000D    height  calc 50  - 1px   x000D       1px   half the line thickness    x000D    width  100   x000D    transform  rotateZ -4deg   x000D    x000D   lt p gt Here comes some  lt strike gt strike-through lt  strike gt  text  lt  p gt  x000D   x000D   x000D

User · Answer

Here s an approach which uses a gradient to fake the line  It works with multiline strikes and doesn t need additional DOM elements  But as it s a background gradient  it s behind the text     del  strike     text-decoration  none    line-height  1 4    background-image  -webkit-gradient linear  left top  left bottom  from transparent   color-stop 0 63em  transparent   color-stop 0 63em   ff0000   color-stop 0 7em   ff0000   color-stop 0 7em  transparent   to transparent      background-image  -webkit-linear-gradient top  transparent 0em  transparent 0 63em   ff0000 0 63em   ff0000 0 7em  transparent 0 7em  transparent 1 4em     background-image  -o-linear-gradient top  transparent 0em  transparent 0 63em   ff0000 0 63em   ff0000 0 7em  transparent 0 7em  transparent 1 4em     background-image  linear-gradient to bottom  transparent 0em  transparent 0 63em   ff0000 0 63em   ff0000 0 7em  transparent 0 7em  transparent 1 4em     -webkit-background-size  1 4em 1 4em    background-size  1 4em 1 4em    background-repeat  repeat      See fiddle  http   jsfiddle net YSvaY   Gradient color-stops and background size depend on line-height   I used LESS for calculation and Autoprefixer afterwards

User · Answer

Adding to  gojomo you could use  after pseudo element for the additional element  The only caveat is that you ll need to define your innerText in a data-text attribute since CSS has limited content functions     x000D   x000D  s   x000D    color  red  x000D    text-align  -1000em  x000D    overflow  hidden  x000D    x000D  s after   x000D    color  black  x000D    content  attr data-text   x000D    x000D   lt s data-text  Strikethrough  gt Strikethrough lt  s gt  x000D   x000D   x000D

User · Answer

Here is a sample jQuery implementation  ndash  thanks to gojomo s answer and utype s suggestion   1 for both     function                                                                                 Special price strike-out text      Usage         Normally      lt span class  price  gt  59 lt  span gt         On special    lt span class  price  special   29  gt  59 lt  span gt                                                                                price special    each function         var originalPrice     this  text          this  html   lt strike gt  lt span gt     originalPrice    lt  span gt  lt  strike gt        this  attr  special                removeAttr  special               addClass  special                The CSS for that could be   price strike   price special   color  Red     price strike span   color  Black

User · Answer

As of Feb  2016  CSS 3 has the support mentioned below  Here is a snippet from a WooCommerce s single product page with price discount    Price before discount on single product page   body single-product  price del  amount   color            hsl 0  90   65    font-size        15px  text-decoration  line-through    noinspection CssOverwrittenProperties   text-decoration  white double line-through     Ignored in CSS1 CSS2 UAs        Resulting in      CSS 3 will likely have direct support using the text-decoration-color property  In particular      The text-decoration-color CSS property sets the color used when drawing underlines  overlines  or strike-throughs specified by text-decoration-line  This is the preferred way to color these text decorations  rather than using combinations of other HTML elements    Also see text-decoration-color in the CSS 3 draft spec   If you want to use this method immediately  you probably have to prefix it  using -moz-text-decoration-color   Also specify it without -moz-  for forward-compatibility

User · Answer

This CSS3 will make you line through property more easier  and working fine      span      text-decoration  line-through      text-decoration-color  red

User · Answer

Single Property solution is   className       text-decoration  line-through red      Define your color after line through property

User · Answer

If you do not care about internet explorer edge  then simplest way to achieve different color for strike-through would be to use CSS property   text-decoration-color in conjunction with text-decoration line-through    yourClass       text-decoration  line-through  important      text-decoration-color  red  important      -- Does not work with Edge Internet Explorer

User · Answer

Blazemonger s reply  above or below  needs voting up - but I don t have enough points   I wanted to add a grey bar across some 20px wide CSS round buttons to indicate  not available  and tweaked Blazemonger s css    round btn after       content           required property        position  absolute      top  6px      left  -1px      border-top  6px solid rgba 170 170 170 0 65       height  6px      width  19px

User · 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    x000D   x000D   lt span style  color red text-decoration line-through  gt  x000D     lt span style  color black  gt black with red strikethrough lt  span gt  x000D   lt  span gt  x000D   x000D   x000D       or    x000D   x000D   lt strike style  color red  gt  x000D     lt span style  color black  gt black with red strikethrough lt span gt  x000D   lt  strike gt  x000D   x000D   x000D     Note  however  that  lt strike gt  is considered deprecated in HTML4 and obsolete in HTML5  see also W3 org   The recommended approach is to use  lt del gt  if a true meaning of deletion is intended  or otherwise to use an  lt s gt  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  lt HEAD gt   must be used   The  hover pseudo-class can t be applied with inline STYLE attributes   For example  x000D   x000D   lt head gt  x000D     lt style gt  x000D      a redStrikeHover hover   x000D        color red  x000D        text-decoration line-through  x000D        x000D     lt  style gt  x000D   lt  head gt  x000D   lt body gt  x000D     lt a href     class  redStrikeHover  gt  x000D       lt span style  color black  gt hover me lt  span gt  x000D     lt  a gt  x000D   lt  body gt  x000D   x000D   x000D    IE7 seems to require some href be set on the  lt a gt  before  hover has an effect  FF and WebKit-based browsers do not

User · Answer

Here you go    x000D   x000D   lt style gt body  color   000   lt  style gt  x000D   lt del gt  amp nbsp  amp nbsp  lt span style  color  999  gt facebook lt  span gt  amp nbsp  amp nbsp  lt  del gt  x000D   x000D   x000D

[html] CSS strikethrough different color from text?

Examples related to html

Examples related to css