Search code examples
hoverinheritancecssvisited

CSS text-shadow property doesn't follow hierarchy with :visited pseudo-class

I have a little problem with the visited pseudo-class and the text-shadow property in CSS.

Here is my code:

li.episode a{
display: block;
float: left;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
margin: 1px;
padding: 5px;
font-size: 14px;
background-color: #eeeaea;
text-shadow: 0 1px 0 white;
}

li.episode a:visited {
background-color: #23EE44;
text-shadow: none;
color: white;
}

li.episode a:hover {
background-color: #23EE44;
text-shadow: 0 1px 0 #10C72E;
color: white;
}

In fact what I would like to have is the visited link just the same as when hovered.

:Hover works fine on Chrome/Safari but the visited link keeps the first text-shadow property:

    text-shadow: 0 1px 0 white;

Instead of the one given below (I tried to use "none" in my code but doesn't seem to work..)

Thanks guys for your help !

Solution

  • There are a very few css properties you can explicitly define for :visited due to security issues.

    MDN defines the modifyable properties as (these may vary by browser, but text-shadow is certainly one that shouldn't work on any browser, at least modifying the size of it):

    • color
    • background-color
    • border-color
    • outline-color

    And in addition you won't be able to define opacity or show/hide the links if the base a selector has done one of those things.