J'essaie de créer une double flèche en cercle mais je ne peux en créer qu'une. J'ai essayé d'utiliser avant mais rien à faire. Voici le code:Double flèche CSS
<div id="basso">
<a href="#" id="freccia">
<span id="bottom"></span>
</a>
</div>
Fiddle: fiddle
Je viens d'utiliser: avant et recopié le CSS que vous utilisez sur: après, en ne changeant que la marge supérieure et la position.
#basso
\t {
\t text-align: center;
\t display: inline-block;
\t vertical-align: middle;
\t }
\t #bottom
\t {
\t display: inline-block;
\t border-radius: 50%; \t
\t }
\t #freccia:hover #bottom
\t {
\t display: inline-block;
\t border-radius: 50%;
\t border: 0.15em solid #4183D7;
\t }
\t #freccia:hover #bottom:after
\t {
\t border-top: 0.15em solid #4183D7;
\t border-right: 0.15em solid #4183D7;
\t }
\t #bottom
\t {
\t display: inline-block;
\t width: 3em;
\t height: 3em;
\t border: 0.15em solid #333;
\t border-radius: 50%;
\t margin-left: 0.75em;
\t transition: all 0.1s ease-out;
\t
\t
\t }
\t #bottom:after
\t {
\t content: '';
\t display: inline-block;
\t margin-top: 0.6em;
\t width: 1.2em;
\t height: 1.2em;
\t border-top: 0.15em solid #333;
\t border-right: 0.15em solid #333;
\t -moz-transform: rotate(135deg);
\t -webkit-transform: rotate(135deg);
\t transform: rotate(135deg);
\t transition: all 0.1s ease-out;
\t }
\t \t #bottom:before
\t {
\t \t position: absolute;
\t content: '';
\t display: inline-block;
\t margin-top: 0.3em;
\t width: 1.2em;
\t height: 1.2em;
\t border-top: 0.15em solid #333;
\t border-right: 0.15em solid #333;
\t -moz-transform: rotate(135deg);
\t -webkit-transform: rotate(135deg);
\t transform: rotate(135deg);
\t transition: all 0.1s ease-out;
\t }
\t #bottom:hover:after
\t {
\t content: '';
\t display: inline-block;
\t margin-top: 0.9em;
\t width: 1.2em;
\t height: 1.2em;
\t border-top: 0.15em solid #4183D7;
\t border-right: 0.15em solid #4183D7;
\t -moz-transform: rotate(135deg);
\t -webkit-transform: rotate(135deg);
\t transform: rotate(135deg);
\t }
\t
\t #bottom:hover:before
\t {
\t content: '';
\t display: inline-block;
\t margin-top: 0.6em;
\t width: 1.2em;
\t height: 1.2em;
\t border-top: 0.15em solid #4183D7;
\t border-right: 0.15em solid #4183D7;
\t -moz-transform: rotate(135deg);
\t -webkit-transform: rotate(135deg);
\t transform: rotate(135deg);
\t }<div id="basso">
<a href="#" id="freccia">
<span id="bottom"></span>
</a>
</div>Bon alors son, mais je pense pas tout le chemin là, je l'ai cassé le dos de celui-ci.
Je l'ai utilisé before pour faire la deuxième flèche: jsfiddle
La marge supérieure vous avez utilisé était un peu excessif, il est l'élargissement du cercle. La seule chose qui vous manque est: vous n'avez pas changé de couleur. –