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