Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

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

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #43694
    Antone1
    Participant

    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/wJvyghttp://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

    #129846
    Paulie_D
    Member

    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

    #129902
    Antone1
    Participant

    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

    #129906
    Paulie_D
    Member

    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.

    #130102
    Antone1
    Participant

    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 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.