html - 悬停在图标上后，如何流畅显示带文字的背景色？

Question

我正在使用很棒的字体图标。当用户将鼠标悬停在图标上时，带有背景的文本将线性显示在屏幕上。

我的问题是

1) 如何去掉每个图标之间的空格。 (显示空格是因为我在文本中使用了 span)。

2) 当鼠标悬停在图标上时，背景颜色显示为 0 到 100%。我需要悬停时直接显示100%。

3) 当我悬停在 Twitter 上时，我只需要 Facebook 图标应该线性滑动而不是 LinkedIn 图标。

我知道这看起来像是家庭作业，但我尝试了一些代码，但它对我不起作用。

我找到了例子 https://codepen.io/renaudtertrais/full/GfaCE/

当悬停在图标上时，它会转到右侧，我需要左侧。

希望有人能帮我解决这个问题。

.header_social {
    text-align: center;
}
.header_social ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.header_social ul li {
    margin: 02px; 
    display: inline-block;
}
.header_social ul li a { 
    color: #000;
    text-decoration: none; 
    position: relative;
}
.header_social i {
    font-size: 18px;
    width: 30px;
    text-align: center;
    line-height: 30px;
    color: #fff;
    border-radius:50%;
    position: absolute;
    right: 0;
    top: -6px;
}

.header_social ul li a span {
	background: #ff0000;
	border-radius: 20px;
	letter-spacing: 1px;
	white-space: nowrap;
    width: 100%;
    visibility:hidden;
}
.header_social ul li:hover span{
    padding: 6px 35px 6px 22px;
    visibility: visible;
    -webkit-transition-property: all;
    -webkit-transition-duration: 2s;
}

.fa-facebook { background-color: #3B5998; }
.fa-twitter { background-color: #1DA1F2; }
.fa-linkedin { background-color: #0077B5; }

	<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="header_social">
    <ul>
        <li><a href=""><span>Facebook</span><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
        <li><a href=""><span>Twitter</span><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
        <li><a href=""><span>LinkedIn</span><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
    </ul>
</div>

Answer 1

尝试为您的 span 宽度设置动画。无需在此处使用 position:absolute

堆栈片段

.header_social {
  text-align: center;
}

.header_social ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.header_social ul li {
  display: inline-block;
}

.header_social ul li a {
  color: #000;
  text-decoration: none;
  position: relative;
  display: block;
}

.header_social i {
  font-size: 18px;
  width: 30px;
  text-align: center;
  line-height: 30px;
  color: #fff;
  border-radius: 50%;
  z-index:9;
  position:relative;
}

.header_social ul li a span {
  background: #ff0000;
  border-radius: 20px 0 0 20px;
  width: 0;
  visibility: hidden;
  display: inline-block;
  padding: 6px 0px;
  text-align: center;
  margin-right: 0;
  vertical-align: top;
  opacity:0;
  transition: all .3s ease;
}

.header_social ul li a:hover span {
  visibility: visible;
  width: 100px;
  margin-right: -15px;
  opacity:1;
}

.fa-facebook {
  background-color: #3B5998;
}

.fa-twitter {
  background-color: #1DA1F2;
}

.fa-linkedin {
  background-color: #0077B5;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="header_social">
  <ul>
    <li><a href=""><span>Facebook</span><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
    <li><a href=""><span>Twitter</span><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
    <li><a href=""><span>LinkedIn</span><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
  </ul>
</div>