How to make arrows move left, right, up using margin or padding
# March 26, 2013 at 9:19 pm
This is an HTML and CSS question. I created right, left, and top text links with arrows next to them. I am trying to create an effect where when a visitor hovers over the text links the arrows that correspond to them move by applying a margin or padding size to the text links.
It’s hard to explain. Please see this link [http://jsfiddle.net/2RheS/4/](http://jsfiddle.net/2RheS/4/ “http://jsfiddle.net/2RheS/4/”) or this link [http://codepen.io/anon/pen/wJvyg](http://codepen.io/anon/pen/wJvyg “http://codepen.io/anon/pen/wJvyg”)
I got the right arrow to move when one hovers over the right text, but I can’t get the left or top arrows to move left and up, even if I center it.
I’ve been fiddling around with this all day but can’t get it to work. What am I missing? I thought it was doable.
Can someone please help me?
Anto# March 27, 2013 at 1:09 pm
Thank you Krish1980 and Pauli_D for your help. Both solutions achieve what I was trying do which was to move the arrows. They both work well!
Yesterday, I spent the day fiddling around with it but sadly didn’t come close to the way both of you have solved it. I definitely need to brush up on my css skills. Pseudo Elements are very new to me. I will be analyzing these solutions to better understand them.
Pauli_D’s solution seems to work the best for me because I can insert certain arrows in different parts of the website. Oddly the right arrow didn’t work on the website until I inserted a position:relative to a.right:before.
I eliminated the borders and background and applied a transition effect to make the arrows slide smoothly when hovering over the links. I tried to do this in codepen so you can see how I did it but it doesn’t show.
So here it is. I applied the following transition code to the hover tags for a smooth effect:
transition: all 0.7s ease 0s;
-webkit-transition: all 0.7s ease 0s; /* Safari and Chrome */
-moz-transition: all 0.7s ease 0s; /* Firefox 4 */
-o-transition: all 0.7s ease 0s; /* Opera */
Looks awesome. Again, thank you for all your help!!
You must be logged in to reply to this topic.