Combining gradient text with strikethrough / line

I've got a gradient text in CSS that I also want to be able to have a strikethrough span within. This works fine in Firefox, but sadly does not in Chrome. Anyone got an idea on how to get this to work in both browsers?

FIDDLE

.gradienttext {
    background: -webkit-linear-gradient(#fff, #999);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.strike {
    text-decoration: line-through;
}

<p class="gradienttext">
    Does <span="strike">not</span> work.
</p>

---

I was very surprised that the code in question worked with the -webkit- specific props and gradient syntax but just now learnt that Firefox had shipped compatibility with these -webkit- specific props.

A now-deleted answer seems to have 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.

---

Findings:

As per MDN, the -webkit-text-fill-color is defined as follows:

The -webkit-text-fill-color CSS property specifies the fill color of characters of text. If this property is not set, the value of the color property is used.

and as per the W3C Specs for text-decoration property the line through's color is specified as follows:

The color(s) required for the text decoration should be derived from the 'color' property value.

It seems like Chrome probably considers the text to be transparent and so applies transparent color to the line through also. Thus we don't get to see any line. But this is not correct because as per specs it should use the value belonging to the color property.

Chrome sets the color correctly (for the snippet in question the color is black but even changing it to another color doesn't work) but doesn't apply it correctly to the line through. For example, in the below snippet the color of the element is green (is inherited from body ) and by inspecting the element with Dev console we can see that the color is set correctly but there is no line through.

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>

链接地址: http://www.djcxy.com/p/94862.html

上一篇: vscode智能感知NodeJs

下一篇: 将渐变文字与删除线/线组合