Я думаю, что это может иметь какое-то отношение к псевдоэлементу, но я не уверен. У меня возникают трудности с эффектом перехода преобразования с использованием css3. В Firefox v24 эффект работает так, как я хочу — см. CodePen здесь http://codepen.io/patrickwc/pen/aKEec, но в Chrome и IE эффект границы ссылок анимируется, а затем внезапно возвращается в исходное положение. Это сложно описать, поэтому лучше всего посмотреть на эффект в Firefox, а затем в Chrome или IE.
body {
background: #000;
color: #fff;
}
p {
text-align: center;
}
nav.footer-social-links a {
position: relative;
margin: 0 10px;
text-transform: uppercase;
letter-spacing: 1px;
padding: 1px 12px 0 8px;
height: 32px;
line-height: 30px;
outline: none;
font-size: 0.8em;
text-shadow: 0 0 1px rgba(255, 255, 255, 0.3);
}
nav.footer-social-links a:hover,
nav.footer-social-links a:focus {
outline: none;
}
.footer-social-links a::before,
.footer-social-links a::after {
position: absolute;
width: 30px;
height: 2px;
background: #fff;
content: '';
opacity: 0.2;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
pointer-events: none;
}
.footer-social-links a::before {
top: 0;
left: 0;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
transform-origin: 0 0;
}
.footer-social-links a::after {
right: 0;
bottom: 0;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transform-origin: 100% 0;
-moz-transform-origin: 100% 0;
transform-origin: 100% 0;
}
.footer-social-links a:hover::before,
.footer-social-links a:hover::after,
.footer-social-links a:focus::before,
.footer-social-links a:focus::after {
opacity: 1;
}
.footer-social-links {
margin: 0;
text-align: center;
}
.footer-social-links a {
color: white;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
display: inline-block;
text-decoration: none;
}
.footer-social-links a:hover::before,
.footer-social-links a:focus::before {
width: 80%;
left: 10%;
-webkit-transform: rotate(0deg) translateX(50%);
-moz-transform: rotate(0deg) translateX(50%);
transform: rotate(0deg) translateX(50%);
}
.footer-social-links a:hover::after,
.footer-social-links a:focus::after {
width: 80%;
right: 5%;
-webkit-transform: rotate(0deg) translateX(50%);
-moz-transform: rotate(0deg) translateX(50%);
transform: rotate(0deg) translateX(50%);
}
<br/>
<nav class="footer-social-links">
<a href="google" target="_blank">
<i class="shc icon-e-gplus"></i>Gplus </a>
<a href="facebook" target="_blank">
<i class="shc icon-e-facebook"></i>Facebook </a>
<a href="twitter" target="_blank">
<i class="shc icon-e-twitter"></i>Twitter </a>
<a href="linkedin" target="_blank">
<i class="shc icon-e-linkedin"></i>Linkedin </a>
<a href="skype" target="_blank">
<i class="shc icon-e-skype"></i>Skype </a>
<a href="http://last.fm/user/zerodegreeburn" target="_blank">
<i class="shc icon-e-lastfm"></i>Lastfm </a>
</nav>
<p>Fixed with help from css-tricks forum and stackoverflow <a href="http://codepen.io/patrickwc/pen/uFGlz" target="_blank">here</a>
</p>
У меня есть ощущение, что возня с transform-origin может это исправить, но я не смог заставить это работать. Будем очень признательны за любую помощь или объяснение разницы.