Add content to an anchor link on hover with transition

Question

I would like to know how i can archive that an icon appears on hovering a anchor link on the page.

I started a little snippet which I thought might do my expected behavior, but instead it leaves a gap. The text should extend (grow) on size as you hover over the anchor.

How can I archive this?

a:after {
    content:" ";
    position: relative;
    opacity: 0;
    left: -20px;
    -webkit-transition: all 250ms;
    transition: all 250ms;
}
a:hover:after {
    opacity: 1;
    left: 0px;
    -webkit-transition: all 250ms;
    transition: all 250ms;
}

<p>This is a <a href='http://stackoverflow.com'>Test</a>. And I would like to link you on <a href='http://stackoverflow.com'>Stackoverflow</a> if you have any questions.</p>

Another side question.. Is my approach, fading in from -20px to 0px, still valid nowadays or are there better solutions. I saw people also do `ease-in`. — MrMAG, Sep 14 '17 at 15:41
What do you expect it to do, push the text to the side on hover? — ProEvilz, Sep 14 '17 at 15:55
Yes sir, exactly. The text should not contain any gaps (or icons) in general, but if you hover over an anchor there should spawn an icon next to the anchor and push the text to the side. — MrMAG, Sep 14 '17 at 15:57

ProEvilz · Accepted Answer · 2017-09-14T16:16:17.420

2

You can use a negative margin-left: -20px; to pull the gap backward whilst there is no hover. Then when the user hovers over the text, you can make margin-left: 0; to add the gap back in for the icon to fit.

a:after {
    content:" ";
    position: relative;
    opacity: 0;
    left: 0px;
    margin-left:-20px;
    -webkit-transition: all 250ms;
    transition: all 250ms;
}
a:hover:after {
    opacity: 1;
    left: 0;
    margin-left:0;
    -webkit-transition: all 250ms;
    transition: all 250ms;
}

<p>This is a <a href='http://stackoverflow.com'>Test</a>. And I would like to link you on <a href='http://stackoverflow.com'>Stackoverflow</a> if you have any questions.</p>

Edit: OP - If you use -26px, this is what happens. The full stop/period gets pushed into the letter t. This is because the gap that is added is only 20px wide so, therefore, you only need subtract 20px.

edited Sep 14 '17 at 16:16

answered Sep 14 '17 at 15:59

ProEvilz

5,310
9
44
74

Aha, cool, that makes sense indeed. So `margin-left` does the trick i was looking for, Thank you sir. I was thinking of kinda the same behavior, and wondered why `left` wasn't working. – MrMAG Sep 14 '17 at 16:05
Adjusted your answer to `margin-left:-26px;`, which makes the text more narrow if it is not hovered. – MrMAG Sep 14 '17 at 16:09
You have a 20px gap that usually wouldn't be there so we only take off 20px. Now that it is 26px, the full stop is now conflicting inside the 'test' text. By using -26px, you are taking off more space than what would be there if you didn't have an icon. There is now less space than a normal space... – ProEvilz Sep 14 '17 at 16:13
Yep I see. Tested in different Browser in `IE Edge 38.14393.1066.0` it seems to be `-20px`, in `Firefox 55.0.3` and `Chrome 60.0.3112.113` `-20px` leaves small gaps, which are solved at `-26px`. So this approach is not 100% cross-browser compatible, but solves at least my expected result. If you have an idea how to solve this too, I'd be much obliged. – MrMAG Sep 14 '17 at 16:24
1

I would take screenshots and post it as a new question, my friend :-) – ProEvilz Sep 14 '17 at 16:29
Nevermind, it seems to be an issue with emojis and how browsers renders them actually, https://stackoverflow.com/q/42016125. SInce my snippet just was a test case, I know I can prevent this by using an icon or font-ligature with a width that is consistent. Anyhow it was good we fall over this minor detail :-P. Thanks again. – MrMAG Sep 14 '17 at 16:40

Add content to an anchor link on hover with transition

1 Answers1