Help please: transition ease-in on pseudo :before on hover

HTML & CSS
1

I can’t seem to get it to ease-in (aka fade in with slight delay) if i put it on :before. What am i missing? Ive tried putting this on the hover to with no effect transition:all 2s ease-in-out;

#nav a {
position:relative;
float:left;
z-index:1;
padding:11px 6px;
text-decoration:none;
transition:all 2s ease-in-out;
}
#nav a:hover:before {
background:#ccc;
border-radius:10px;
position:absolute;
content:“”;
width: 100%;
height: 50%;
bottom:1px;
left:1px;
}

2

am not certain of the specific effect you are trying to achieve, but you are targeting the wrong element with your transition declaration.

you should be putting it in #nav a:before{ transition…}

like this:

 #nav a {
position:relative;
float:left;
z-index:1;
padding:11px 6px;
text-decoration:none;
}
#nav a:before {
content:'';
background:#ccc;
border-radius:0;
position:absolute;
content:"";
width: 0;
height: 0;
bottom:1px;
left:1px;
transition:all 2s ease-in-out;

}
#nav a:hover:before {
border-radius:10px;
width: 100%;
height: 50%;
}

hope that helps

3

opps sorry for the delayed response - I forgot. Ya I thought I tried that. I tried again here and put it on a test page. http://www.websitecodetutorials.com/projects/projects/test.php. trying to get that hover to delay. I think I remember that you may not be able to delay psuedos but I could be wrong. If I can’t delay those can you think of another way to achieve this simple hover with delay? If it were fixed width items that would be easier but they are not. Because I just swap padding and margin as is so any delay on the anchor also does a delay of the padding switch which does not look good.

4

I was testing in safari. Googling WebKit used to not transition on psuedos. I read it had been fixed. But I’m not seeing it. I will check the others when I get to my imac.

Apparently the fix is inherit for WebKit http://dabblet.com/gist/4075566 I will try it later

5

Ok I give I can’t get it to ease-in-out no matter what I do or where I put it. In any browser. I’m obviously over looking something. Can you see what it is please?

6

I got it done. Just needed to obsess on it a while. :slight_smile: