Grow your CSS skills. Land your dream job.

How to make arrows move left, right, up using margin or padding

  • # March 26, 2013 at 9:19 pm

    Hello,

    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 7:12 am

    Ugly way to do it

    [http://codepen.io/Krish1980/pen/mLwau](http://codepen.io/Krish1980/pen/mLwau “”)

    Till a more elegant solution comes along

    # March 27, 2013 at 7:29 am

    Depends on whether the arrows are to move or the text.

    Pseudo Elements would seem to be the way to go to keep the HTML clean and semantic…IE8 and up support.

    Arrows move: http://codepen.io/Paulie-D/pen/idypu

    Text moves: http://codepen.io/Paulie-D/pen/JcIDE

    # March 27, 2013 at 1:09 pm

    Hello,

    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!!

    Anto

    # March 27, 2013 at 1:11 pm

    @Antone1, transitions for pseudo-elements is severely lacking…only FF right now I believe, so if you want the transition, you won’t be able to use pseudo-elements

    # March 27, 2013 at 1:24 pm

    I updated the Pens to include the transitions.

    The ‘text moving’ works in Chrome and probably IE10 & FF.

    As @ChrisP said, transition of pseudo elements is not well supported as yet so by all means test in Firefox….they work.

    # March 28, 2013 at 11:36 pm

    ChrisP and Paulie_D, you’re right, transition of pseudo elements don’t work on all browsers (Example: Safari) Hopefully this will change with time. For now, Firefox will do.

    Thank you again for all your help!!

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".