[Cascade / Pseudo-elements / Values / Fragmentation] currentColor when fragments have differents colors #1510
Description
CSS Color says
The keyword
currentcolorrepresents value of the color property on the same element.
But what if different fragments of that element have different colors? This is possible with ::first-line.
Example: https://jsfiddle.net/ehzknab5/2/
<div><span>Lorem ipsum<br />dolor amet.</span></div>
<div><span>Lorem ipsum.</span></div>div {
color: red;
}
div::first-line {
color: green;
}
br {
line-height: 0;
}
span {
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
line-height: 50px;
background-image: linear-gradient(currentcolor, currentcolor);
background-color: currentColor;
background-size: 100% 75%;
background-repeat: no-repeat;
border: 5px solid currentColor;
outline: 5px solid currentColor;
box-shadow: 111px 0 5px currentColor;
text-shadow: 222px 0 2px currentColor;
filter: drop-shadow(333px 0 0 currentColor);
}Firefox:
Chrome:
Edge:
