css3 transitions for before content on hover

Hudson71
Les bases HTML/CSS

Hi everyone and sorry for my english, the title doesn't seem quite obvious. Here is what i'm trying to do. I have a navigation as following:

<nav>
<ul>
<li><a href=""><?php echo ("accueil"); ?></a></li>
<li><a href=""><?php echo ("biographie"); ?></a></li>
<li><a href=""><?php echo ("agenda"); ?></a></li>
<li><a href=""><?php echo ("archives"); ?></a></li>
<li><a href=""><?php echo __("programmes"); ?></a></li>
</ul>
</nav>

I want that the hover append an arrow on the left of each navigation link. This is my css so far:

color: #747474;
font-size: 16px;
text-transform: capitalize;

}
nav li:hover:before{
content: '> ';
color: #fff;
}

This code is working, however I tried to add a transition to this arrow apparition to make it look smoother instead of appearing in a brutal manner. Unfortunately I failed and I cannot figure if this is even possible. There have other ways but since i'm facing this problem i would like to extend my knowledge and understand how to make this work.

Thank you all in advance for your help!

6 réponses

ByronHampton

Graphics are collected for the width of the facilities for the individuals. The moulding element and assignmentgeek.com.au is implemented for the humans. The shape is found here or the identical items for the humans.

Evelyn22

Try this:
HTML:

<nav>
    <ul>
        <li><span>></span><a href="">aaa</a></li>
        <li><span>></span><a href="">bbb</a></li>
        <li><span>></span><a href="">ccc</a></li>
        <li><span>></span><a href="">ddd</a></li>
        <li><span>></span><a href="">eee</a></li>
    </ul>
</nav>

mcdvoice
CSS:

nav li a{
color: #747474;
font-size: 16px;
text-transform: capitalize;
}

JS:

$(document).ready(function(){
$('li').find('span').hide();
$('li').mouseenter(function(){
$(this).find('span').fadeIn('slow');
}).mouseout(function(){
$(this).find('span').fadeOut('slow');
});
});

Raphael2588

The moulding element and assignmentgeek.com.au is implemented for the humans. The shape is found here or the identical items for the humans. krogerfeedback

blusoftwareupdate

Given that already Fox had been only in the HDR10+ camp (for additional on the specialized and political foundation on this, see this past story), Alita's extra Dolby Vision bolster brings BLU phone software update up noteworthy issues with regards to the continuous HDR "war".

Alainpre

I think the property content is not animatable.
I've tried with margin-left and the transition is OK.

Kepand

you fight to save your bounty dragons for the collection and the magic land. merge dragon cheats