“inherit” value doesn't inherit from “:visited

Question

Consider the following HTML:

<a href="http://google.com">foo <span class="bar">bar</span></a>

and CSS:

a {
    text-decoration:none;
    border-bottom-width: 0px;
    border-bottom-color: green;
    border-bottom-style: solid;
}

a:visited {
    color: red;
    border-bottom-color: yellow;
}

a:hover {
    color: gray;
    border-bottom-color: gray;
}

.bar {
    color: inherit;
    border-bottom-width: 1px;
    border-bottom-color: inherit;
    border-bottom-style: inherit;
}

jsFiddle

---

What I expect:

The "bar" word should be colored red and have a yellow bottom border (since it should inherit from a:visited, because http://www.google.com is a visited link).

What actually happens:

The "bar" word is blue and its bottom border is green, as it is inheriting from a, not a:visited.

It does, though, inherit from a:hover: it and its bottom border change color to gray.

Question: How can I make a child of <a> inherit values from its :visited state? I will accept solutions that involve JS and jQuery. It's critical that I keep inherit as value of color and border-bottom-color.

EDIT: Apparently, this has something to do with patching the CSS history leak. Still, I wonder if it's possible to acheive what I wanted.

Answer 1

Unfortunately, Extra Mark-up Appears to be Needed

This was tested in FF22, IE9+ (IE8 for the CSS2 version), and Chrome28.

The only way I have found (and probably the only way it will work at all given the security features) to get the color differentiation you desire based off inherited control from the a and a:visited states is by some extra mark-up in the html.

Specifically, all the text outside the .bar needs to be wrapped in its own span (or two span elements, if text also followed .bar), and then the .bar text needs a double wrapping. I assume this works because it is using the normal default inheriting of the color value for .bar (which also controls the default border-color), and so it allows the :visited text color state to pass to .bar.

Here's the code (I made new lines for the html display just to make the extra mark-up more visible):

UPDATED for unvisited bottom border color control.

See the fiddle.

HTML

<a href="http://google.com">
  <span>foo </span>
  <span class="bar">
    <span>bar</span>
  </span>
</a>

CSS (CSS3 version)

a {
    text-decoration:none;
    color: green; /* controls unvisited border color */
    border-bottom-width: 0px;
    border-bottom-style: solid;
}

a span:not(.bar) {
    color: blue; /* sets text color of unvisited links */
}

a:visited {
    color: yellow; /*sets border color of visited links */
}

a:visited span:not(.bar) {
    color: red; /* sets text color of visited links */
}

a:hover span:nth-child(n) { 
    /* nth-child(n) selects all, but is needed to override specificity of
       :not(.bar) in the previous selector. NOTE: because all the text must be
       wrapped in a child span, there is no need to define just the a:hover
       selector without the following span, unless other links will use this
       without a .bar nesting
    */
    color: gray; /* sets text and border color when hovered */
    /* eliminated unneeded border-color property */
}

.bar {
    border-bottom-width: 1px;
    border-bottom-style: inherit;
    /* border-color uses color property of <a> in whatever state it is in */
}

CSS2 (if IE8 browser support is needed)

You must conditionally feed a different set of css for the various a element states to IE8 (the base a code is the same). This cannot be combined with the above in any way, else it will mess up the working needed for Chrome.

See the fiddle.

a span {
    color: blue;
}

a:visited {
    color: yellow;
}

a:visited span {
    color: red;
}

a:visited span.bar {
    color: inherit;
}

a:hover span,
a:hover span.bar {
    color: gray;
}

Answer 2

It works fine just remove the color: inherit; and border-bottom-color: inherit;

Inherit sets it back to the original as it is part of the <a> so it has nothing to inherit

Working fiddle: http://jsfiddle.net/Hive7/5a8Pk/3/