Css 图标悬停文本效果

如何在这种社会悬停效应中取得更好的效果。有什么想法吗

---

例如：

为了在宽度/高度上使用css转换，您必须使用像素中的静态值作为示例（而不是

auto

）

下面是它的外观：

.social li a {
    width: 30px;
    line-height: 50px;
    height: 40px;
    float: left;
    overflow: hidden;
    text-decoration: none;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    background:transparent;
    transition: width .5s, background .5s;
    padding:5px;
}
.social li.rss a {
    color: #F88F16;
}
.social li.facebook a {
    color: #3B5998;
}
.social li.twitter a {
    color: #3CF;
}
.social li.googleplus a {
    color: #BD3518;
}
.social li.facebook:hover a {
    width: 115px;
    background:#999;
}
.social li.twitter:hover a {
    width: 80px;
    background:#999;
}
.social li.googleplus:hover a {
    width: 105px;
    background:#999;
}

---

附言：我清除了你的CSS；）

以什么方式更好？您想要解决的问题到底是什么？当它显示我想要的文本（如“线性或任何内容”）时，请在您的问题中添加相关的“”代码。不要试图通过假装你的链接是代码来规避规则：它不是。欢迎，很乐意帮助：）