CODEWITHSUNDEEP
htmlcss
gojomo
gojomo

Reputation: 54173

CSS strikethrough different color from text?

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?

Upvotes: 331

Views: 283635

Answers (16)

Evan Levesque
Evan Levesque

Reputation: 3203

This can be achieved by placing a span inside an element and assigning each a distinct color.

<s style="color: red;">
  <span style="color: black;">Lorem ipsum dolor sit amet</span>
</s>

Upvotes: 1

Julio Spinelli
Julio Spinelli

Reputation: 789

Just an update, this can be easily done now by doing:

text-decoration: underline;
text-decoration: underline dotted;
text-decoration: underline dotted red;
text-decoration: green wavy underline;
text-decoration: underline overline #FF3028;

then add the desired font color with color: ....

Adding something that wasn't obvious to me when you apply this to React inline styling:

<p style= {{textDecoration:'line-through red', color:'gray'}} >

you need to switch the '-' for cammel case.

This renders the content of

....

in color gray crossed out by a red line.

For more details check the documentation here

Upvotes: 2

Najam Us Saqib
Najam Us Saqib

Reputation: 3404

Single Property solution is:

.className {
    text-decoration: line-through red;
};

Define your color after line through property.

Upvotes: 5

Humayoun
Humayoun

Reputation: 51

If it helps someone you can just use css property

text-decoration-color: red;

Upvotes: 1

ibolmo
ibolmo

Reputation: 61

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. 

s {
  color: red;
  text-align: -1000em;
  overflow: hidden;
}
s:after {
  color: black;
  content: attr(data-text);
}
<s data-text="Strikethrough">Strikethrough</s>

Upvotes: 6

Vishnu SR
Vishnu SR

Reputation: 171

This CSS3 will make you line through property more easier, and working fine. 

span{
    text-decoration: line-through;
    text-decoration-color: red;
}

Upvotes: 17

Rohin Tak
Rohin Tak

Reputation: 497

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

Upvotes: 11

Eugene Kardash
Eugene Kardash

Reputation: 360

Here you go:

<style>body {color: #000;}</style>
<del>&nbsp;&nbsp;<span style="color:#999">facebook</span>&nbsp;&nbsp;</del>

Upvotes: 5

Blazemonger
Blazemonger

Reputation: 92893

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.

s,
strike {
  text-decoration: none;
  /*we're replacing the default line-through*/
  position: relative;
  display: inline-block;
  /* keeps it from wrapping across multiple lines */
}

s:after,
strike:after {
  content: "";
  /* required property */
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 2px solid red;
  height: 45%;
  /* adjust as necessary, depending on line thickness */
  /* or use calc() if you don't need to support IE8: */
  height: calc(50% - 1px);
  /* 1px = half the line thickness */
  width: 100%;
  transform: rotateZ(-4deg);
}
<p>Here comes some <strike>strike-through</strike> text!</p>

Upvotes: 42

Brady Edgar
Brady Edgar

Reputation: 543

In my experience the

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

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;

   &: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

Upvotes: 4

gojomo
gojomo

Reputation: 54173

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

Upvotes: 467

Mechanical snail
Mechanical snail

Reputation: 30637

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: Text decoration example

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

Upvotes: 83

anoldermark
anoldermark

Reputation: 381

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;
}

Upvotes: 2

simbo
simbo

Reputation: 374

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

Upvotes: 5

kpowz
kpowz

Reputation: 429

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/

Upvotes: 0

Aximili
Aximili

Reputation: 29464

Here is a sample jQuery implementation – thanks to gojomo's answer and utype's suggestion (+1 for both)

$(function(){
  //===================================================================
  // Special price strike-out text
  // Usage:
  //   Normally:    <span class='price'>$59</span>
  //   On special:  <span class='price' special='$29'>$59</span>
  //===================================================================
  $(".price[special]").each(function() {
    var originalPrice = $(this).text();
    $(this).html('<strike><span>' + originalPrice +'</span></strike> ' + $(this).attr('special'))
           .removeAttr('special')
           .addClass('special');
  });
});

The CSS for that could be

.price strike, .price.special { color: Red; }
.price strike span { color: Black; }

Upvotes: -5

Related Questions