Imagine you have the following piece of HTML:
<a id=link1><span>Link 1</span></a>
<a id=link2><span>Link 2</span></a>
Now, accompanying this HTML is the following CSS:
a { color: white; }
a:hover { color: green; }
#link1 span { color: white; }
#link2 span { color: inherit; }
a:hover span { color: currentColor; }
An interesting observation to note is that upon hovering, the span within link 1 will remain white because its color property is explicitly defined as white. On the other hand, the span in link 2 will turn green when hovered over, even though it inherits the parent's color value.
This brings us to question whether using currentColor can truly capture colors inherited through the inherit property. This behavior has been observed and tested on both Firefox and Chrome browsers.
Check out the Fiddle for a demo
* { font-family: 'trebuchet ms'; }
code { color: #c00; font-family: 'courier new'; font-size: .95em; }
a { display: block; color: white; background: black; padding: 1rem; margin: 1rem; cursor: pointer; text-align: center; }
a:hover { color: green; }
#link1 span { color: white; }
#link2 span { color: inherit; }
a:hover span { color: currentColor; }<p>When hovering over link 1, the <code>span</code> inside retains its white color due to the explicit definition, making it the current color.</p>
<a id=link1><span>link 1 (I stay white)</span></a>
<p>However, the <code>span</code> within link 2 inherits the white color from its parent <code>a</code> element. Unfortunately, this inherited color is not recognized as the current color upon hover, resulting in the text turning green based on the rule <code>a:hover { color: green; }</code>.</p>
<a id=link2><span>link 2 (I go green)</span></a>