I was very surprised that this code worked with the -webkit- specific props and gradient syntax, but only now found out that Firefox combined with these -webkit- props.
Now the deleted answer seems to come close to explaining why it doesn’t work in Chrome, but not close enough, and since it is now deleted (I don’t know why), I will add a more complete explanation.
Conclusions:
According to MDN , -webkit-text-fill-color is defined as follows:
The CSS -webkit-text-fill-color property determines the fill color of the text characters. If this property is not set, the value of the color property is used.
and according to the W3C Specs for the text-decoration property, the line through color is specified as follows:
The color (s) required to style the text should be derived from the property value .
Chrome seems to think the text is transparent, so it also applies a transparent color to the line. Thus, we do not see any line. But this is not true, because according to the specifications it should use a value belonging to the color property.
Chrome sets color correctly (for the fragment in question, the color is black, but even changing it to another color does not work), but it does not correctly apply it to the line. For example, in the fragment below, the color element of this element is green (inherited from the body ) and, checking the element using the Dev console, we see that the color parameter is set correctly, but the line does not pass.
body { background: black; color: green; } .gradienttext { background: -webkit-linear-gradient(#fff, #999); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .strike { text-decoration: line-through; }
<p class="gradienttext"> The following dummy text should both be a long vertical gradient, and also be strikethrough, which works fine on firefox, but not chrome. <span class='strike'> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </span> </p>
If we apply some color to the -webkit-text-fill-color property, Chrome also applies the same color to the string. It seems to be like setting the line color to transparent for the code in question. But this is not a viable solution for your case, since you need gradient text.
body { background: black; color: green; } .gradienttext { background: -webkit-linear-gradient(#fff, #999); -webkit-background-clip: text; -webkit-text-fill-color: red; } .strike { text-decoration: line-through; }
<p class="gradienttext"> The following dummy text should both be a long vertical gradient, and also be strikethrough, which works fine on firefox, but not chrome. <span class='strike'> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </span> </p>
When we set the color to the -webkit-text-stroke-color property, Chrome uses the same color again for the line, but it seems to work only when we give -webkit-text-stroke-width non -webkit-text-stroke-width zero value and this again creates an undesirable result.
body { background: black; color: green; } .gradienttext { background: -webkit-linear-gradient(#fff, #999); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .strike { text-decoration: line-through; -webkit-text-stroke-color: red; -webkit-text-stroke-width: 1px; }
<p class="gradienttext"> The following dummy text should both be a long vertical gradient, and also be strikethrough, which works fine on firefox, but not chrome. <span class='strike'> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </span> </p>
Even setting a color explicitly on span.strike has no effect.
Workaround:
As a workaround, you can use gradient background images to simulate the impact effect, as in the fragments below.
It uses a gradient background image that is 1 m high and not transparent to only 1px when moving from bottom to top. This creates the illusion of a strike through or line (so this is probably not very good from the point of view of screen readers, etc.)
With Webkit gradient syntax:
body { background: black; } .gradienttext { background: -webkit-linear-gradient(#fff, #999); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .strike { background: -webkit-linear-gradient(bottom, transparent calc(.5em - 1px), red calc(.5em - 1px), red .5em, transparent .5em); background-size: 100% 1em; }
<p class="gradienttext"> The following dummy text should both be a long vertical gradient, and also be strikethrough, which works fine on firefox, but not chrome. <span class="strike"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </span> </p>
With standard gradient syntax:
body { background: black; } .gradienttext { background: linear-gradient(#fff, #999); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .strike { background: linear-gradient(to top, transparent calc(.5em - 1px), red calc(.5em - 1px), red .5em, transparent .5em); background-size: 100% 1em; }
<p class="gradienttext"> The following dummy text should both be a long vertical gradient, and also be strikethrough, which works fine on firefox, but not chrome. <span class="strike"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </span> </p>