CSS strikethrough different color from text?

text-decoration-color not working
text-decoration line-through thickness
text-decoration line-through height
different underline color css
text decoration line through color css
html different color strikethrough
css strikethrough background
text-fill-color css

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?

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>

CSS strikethrough different color from text?, 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� text-decoration-line: Sets the kind of text decoration to use (like underline, overline, line-through) text-decoration-color: Sets the color of the text decoration: text-decoration-style: Sets the style of the text decoration (like solid, wavy, dotted, dashed, double) initial: Sets this property to its default value. Read about initial: inherit

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

text-decoration-color, The text-decoration-color property sets the color of the underline, overline, or line -through on text with the text-decoration property applied. 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.

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>

text-decoration-color, The HTML elements del, strike, or s may all be used for a text strike-through effect . Examples: as the text. Can CSS be used to make the line a different color? Luckily, there’s a way to change the color of the actual strikethrough line, independent of the text color. It can make the text behind the line slightly more readable if the line is a lighter color, like red. Using the Span Element – Style Sheet

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

CSS strikethrough different color from text?, Set different text decorations for <h1>, <h2>, and <h3> elements: text- decoration: text-decoration-line text-decoration-color text-decoration-style|initial| inherit;� The property and value to make text with a strikethrough is: text-decoration: line-through And an example: this text is struck through. An example of making a CSS class have strikethrough text (and you can probably guess from the class name what sort of text I was putting a line through):.fullprice { text-decoration: line-through; }

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

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

CSS text-decoration property, The HTML elements del, strike, or s may all be used for a text strike-through effect . Examples: del .gives: del strike and strike. The shorthand property and the sub-properties text-decoration-color, text-decoration-line, and text-decoration-style are supported unprefixed in Firefox, and with the -webkit prefix in Safari. Chrome will also recognize those values with the -webkit prefix and Experimental Web Platforms flag enabled.

CSS strikethrough different color from text?, Adding a strikethrough to a line of text in CSS is easy. But what if you want the strikethrough line to be a different height, color, or whatever? This section will show you adding a strikethrough by inserting a line in the cell, and then change the line color to your needed one. Please do as follows. 1. Click Insert > Shapes > Line. See screenshot: 2. Then draw a line on the cell text you need to add strikethrough as below screenshot shown. 3.

Building Custom Text Strikethroughs with CSS, However, the strikethrough line is typically the same color as the text. Can CSS be used to make the line a different color? “`CSS. This text will appear to be green if you put it in Discord. “` There are two basic ways to enter text this way. The first way is to have a text file on your computer with the various codes for the different text colors that you can access in this fashion, and cut and paste the segments you want to use.

CSS strikethrough different color from text?, The way text decorations are normally used for texts, <SPAN> will usually be a good solution, as it doesn't add any other formatting to the text string. A piece of text� How to Create Strikethrough Text in Discord. For strikethrough text, we need to use the tilde (~) key. Two tildes cross out, or ‘strike through’, the text you type. Here’s the keyboard layout (yellow highlighted keys) for typing a tilde. You have to hit SHIFT + ~.

Comments
  • For a transparent strike through effect, you can see transparent strikethrought on text
  • So much for my "that's impossible!" answer.
  • Jquery implementation would be very useful.
  • @utype Why would you use jQuery for this?
  • Wrapper elements kinda suck. In most cases you can achieve almost the same effect with simple pseudoelement, i.e. del { position:relative } and then del::after { content:'', position:absolute; top: 50%; left: 0; right:0; border-bottom: 1px solid #f00 }.
  • Just a wrapper. Ingenious. Oh my god, that's better than everything I came up with (pseudo-elements). Great job!
  • "CSS 3 will likely have" is rather... optimistic.
  • @BoltClock: How is it optimistic? It's already in the W3C working draft, which is being actively pursued.
  • According to caniuse, no browsers are currently (in 2014) supporting text-decoration-color without prefixes.
  • And 3 years later...Firefox and Safari have it = 20% of reach.
  • according to the caniuse, currently is supported by FireFox only
  • @Veve HTML strikethrough element -- the non-semantic version