Menu
You cannot set the color of strikethrough alone, because it is integrated with the text. To change its color, you can only change the color of the text. If you insist on Strikethrough's color and text's is different, it can only be achieved by drawing a line. In addition, there is no shortcut key for strikethrough.
Underline tag: To change the color of the underline, we need to add some styling using CSS (inline/internal/external). By default, the color of the underline is black. In CSS, we will use text-decoration property to style underline.
Simply add the appropriate CSS selector and define the color property with the value you want. For example, say you want to change the color of all paragraphs on your site to navy. Then you'd add p {color: #000080; } to the head section of your HTML file.
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>href be set on the <a> before :hover has an effect; FF and WebKit-based browsers do not.)
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-colorCSS property sets the color used when drawing underlines, overlines, or strike-throughs specified bytext-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.)
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>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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With