StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO:after transition on hover make elements move
text
Body
copied!<p>I put an image on :after, with a translation on :hover. It makes other unrelated elements move on Chrome, with OS X (Firefox: unresponsive, and Safari : doesn't support transition effect)</p> <p>I tried without transition, works fine.</p> <p>I have this on several elements, and they all have this same problem as long as transition and :after are involved.</p> <p>Here's the html:</p> <pre><code><a href="work-timburton.html" class="btn-call-to-action">See the project</a> </code></pre> <p>and the css:</p> <pre><code>.btn-call-to-action { background: #8e8287; margin-bottom: 15px; color: #f5f3e2; padding: 10px 70px 10px 10px; margin-top: 6px; line-height: 1; display: inline-block; position: relative; border-bottom: none; border-radius: 2px; white-space: nowrap; } .btn-call-to-action:after { content: url('../img/general-white-arrow.svg?1370787761'); position: relative; display: inline-block; position: absolute; top: 8px; width: 35px; padding-left: 15px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .btn-call-to-action:hover:after { -webkit-transform: translatex(6px); -moz-transform: translatex(6px); -o-transform: translatex(6px); -ms-transform: translatex(6px); transform: translatex(6px); } </code></pre> <p><a href="http://aurelieremia.be/tfa/" rel="nofollow">and the live version here.</a></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload