社交 link 之前属性

Question

在此社交部分，当您将鼠标悬停在图标上时，将通过将现有图标推到顶部来显示前属性。所以，我想 link 他们到他们适当的 links，但到属性之前。我已经尝试向整个 li 添加一个锚标记，但是当我在这里使用 flex 时，这会扰乱整个设计。 related link 我以为会有帮助，但没有。

感谢任何形式的帮助。

（提前致谢）

.contact-sociables {
    width: 100%; 
    padding-bottom: 50px;
}

.sociables-inner {
    width: 100%;
    max-width: 650px;
    margin: 0 auto;
    text-align: center;   
    position: relative; 
}

.sociables-inner ~ a {
    display: flex;
    flex-direction: row;
}

.contact { 
    padding: 30px 15px;
    margin: 0 15px;
    overflow: hidden;
    position: relative;
    height: 50px;
    
    border: 1px solid grey;
}

.contact i {
    position: absolute;
    top: 37%;
    left: 42%;
    transition: all 350ms linear;
    color: #fff;
}

.item1 {flex: 1;height: 15px;background: #3b5998;}
.item2 {flex: 1;height: 15px;background: #dd4b39;}
.item3 {flex: 1;height: 15px;background: #0084b4;}
.item4 {flex: 1;height: 15px;background: #8a3ab9;}
.item5 {flex: 1;height: 15px;background: #ff1493;}
.item6 {flex: 1;height: 15px;background: #c8232c;}

.contact.item1:before {
    content: "\f09a";
    color: #3b5998;
    background: #fff;
    width: 100%;
    padding: inherit;
}
.contact.item2:before {
    content: "\f0d5";
    font-family: fontawesome;
    color: #dd4b39;
    background: #fff;
    width: 100%;
    padding: inherit;
}
.contact.item3:before {
    content: "\f099";
    color: #0084b4;
    background: #fff;
    width: 100%;
    padding: inherit;
}
.contact.item4:before {
    content: "\f16d";
    color: #8a3ab9;
    background: #fff;
    width: 100%;
    padding: inherit;
}
.contact.item5:before {
    content: "\f17d";
    color: #ff1493;
    background: #fff;
    width: 100%;
    padding: inherit;
}
.contact.item6:before {
    content: "\f0d2";
    color: #c8232c;
    background: #fff;
    width: 100%;
    padding: inherit;}


.contact:before {
    font-family: FontAwesome;
    content: "\f07a";
    position: absolute;
    top: 100%;
    left: -14px;
    transition: all 350ms linear;
}

.contact:hover i {
    top: -20px;
    transition: all 350ms ease-out;

}

.contact:hover:before {top: 0%;}

<head>
<script src="https://use.fontawesome.com/a2e210f715.js"></script>
</head>
<body>
<div class="contact-sociables">
  <div class="iva-main">
  <div class="team-heading" style="text-align: center;">Follow Us Here</div>
   <div class="sociables-inner clearfix">
    <ul style="display: flex;">
    <li class="contact item1"><i class="fa fa-facebook"></i></li>
    <li class="contact item2"><i class="fa fa-google-plus"></i></li>
    <li class="contact item3"><i class="fa fa-twitter"></i></li>
    <li class="contact item4"><i class="fa fa-instagram"></i></li>
    <li class="contact item5"><i class="fa fa-dribbble"></i></li>
    <li class="contact item6"><i class="fa fa-pinterest"></i></li>
    </ul>
   </div>
  </div>
 </div><!--contact socials-->
  </body>

Answer 1

您可以使用以下解决方案：

.contact-sociables {
  width: 100%; 
  padding-bottom: 50px;
}
.sociables-inner {
  width: 100%;
  max-width: 650px;
  margin: 0 auto;
  text-align: center;   
  position: relative; 
}
.sociables-inner ~ a {
  display: flex;
  flex-direction: row;
}
.contact { 
  padding: 30px 15px;
  margin: 0 15px;
  overflow: hidden;
  position: relative;
  height: 50px; 
  border: 1px solid grey;
}
.contact:before {
  background: #fff;
  width: 100%;
  padding: inherit;
  font-family: FontAwesome;
  content: "\f07a";
  position: absolute;
  top: 100%;
  left: -14px;
  transition: all 350ms linear;
}
.contact i {
  position: absolute;
  top: 37%;
  left: 42%;
  transition: all 350ms linear;
  color: #fff;
}
.contact a, .contact a:link {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute;
}
.item1 {flex: 1;height: 15px;background: #3b5998;}
.item2 {flex: 1;height: 15px;background: #dd4b39;}
.item3 {flex: 1;height: 15px;background: #0084b4;}
.item4 {flex: 1;height: 15px;background: #8a3ab9;}
.item5 {flex: 1;height: 15px;background: #ff1493;}
.item6 {flex: 1;height: 15px;background: #c8232c;}

.contact.item1:before {
  content: "\f09a";
  color: #3b5998;
}
.contact.item2:before {
  content: "\f0d5";
  color: #dd4b39;
}
.contact.item3:before {
  content: "\f099";
  color: #0084b4;
}
.contact.item4:before {
  content: "\f16d";
  color: #8a3ab9;
}
.contact.item5:before {
  content: "\f17d";
  color: #ff1493;
}
.contact.item6:before {
  content: "\f0d2";
  color: #c8232c;
}
.contact:hover i {
  top: -20px;
  transition: all 350ms ease-out;
}
.contact:hover:before {top: 0%;}

<script src="https://use.fontawesome.com/a2e210f715.js"></script>
<div class="contact-sociables">
  <div class="iva-main">
  <div class="team-heading" style="text-align: center;">Follow Us Here</div>
    <div class="sociables-inner clearfix">
      <ul style="display: flex;">
        <li class="contact item1">
          <a href="https://facebook.com"><i class="fa fa-facebook"></i></a>
        </li>
        <li class="contact item2">
          <a href="https://google.com"><i class="fa fa-google-plus"></i></a>
        </li>
        <li class="contact item3">
          <a href="https://twitter.com"><i class="fa fa-twitter"></i></a>
        </li>
        <li class="contact item4"><a href="https://instagram.com">
          <i class="fa fa-instagram"></i></a>
        </li>
        <li class="contact item5">
          <a href="https://dribbble.com"><i class="fa fa-dribbble"></i></a>
        </li>
        <li class="contact item6">
          <a href="https://pinterest.com"><i class="fa fa-pinterest"></i></a>
        </li>
      </ul>
    </div>
  </div>
</div>

Answer 2

.contact-sociables {
  width: 100%; 
  padding-bottom: 50px;
}
.sociables-inner {
  width: 100%;
  max-width: 650px;
  margin: 0 auto;
  text-align: center;   
  position: relative; 
}
.sociables-inner ~ a {
  display: flex;
  flex-direction: row;
}
.contact { 
  padding: 30px 15px;
  margin: 0 15px;
  overflow: hidden;
  position: relative;
  height: 50px; 
  border: 1px solid grey;
}
.contact:before {
  background: #fff;
  width: 100%;
  padding: inherit;
  font-family: FontAwesome;
  content: "\f07a";
  position: absolute;
  top: 100%;
  left: -14px;
  transition: all 350ms linear;
}
.contact i {
  position: absolute;
  top: 37%;
  left: 42%;
  transition: all 350ms linear;
  color: #fff;
}
.contact a, .contact a:link {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute;
}
.item1 {flex: 1;height: 15px;background: #3b5998;}
.item2 {flex: 1;height: 15px;background: #dd4b39;}
.item3 {flex: 1;height: 15px;background: #0084b4;}
.item4 {flex: 1;height: 15px;background: #8a3ab9;}
.item5 {flex: 1;height: 15px;background: #ff1493;}
.item6 {flex: 1;height: 15px;background: #c8232c;}

.contact.item1:before {
  content: "\f09a";
  color: #3b5998;
}
.contact.item2:before {
  content: "\f0d5";
  color: #dd4b39;
}
.contact.item3:before {
  content: "\f099";
  color: #0084b4;
}
.contact.item4:before {
  content: "\f16d";
  color: #8a3ab9;
}
.contact.item5:before {
  content: "\f17d";
  color: #ff1493;
}
.contact.item6:before {
  content: "\f0d2";
  color: #c8232c;
}
.contact:hover i {
  top: -20px;
  transition: all 350ms ease-out;
}
.contact:hover:before {top: 0%;}

<script src="https://use.fontawesome.com/a2e210f715.js"></script>
<div class="contact-sociables">
  <div class="iva-main">
  <div class="team-heading" style="text-align: center;">Follow Us Here</div>
    <div class="sociables-inner clearfix">
      <ul style="display: flex;">
        <li class="contact item1">
          <a href="https://facebook.com"><i class="fa fa-facebook"></i></a>
        </li>
        <li class="contact item2">
          <a href="https://google.com"><i class="fa fa-google-plus"></i></a>
        </li>
        <li class="contact item3">
          <a href="https://twitter.com"><i class="fa fa-twitter"></i></a>
        </li>
        <li class="contact item4"><a href="https://instagram.com">
          <i class="fa fa-instagram"></i></a>
        </li>
        <li class="contact item5">
          <a href="https://dribbble.com"><i class="fa fa-dribbble"></i></a>
        </li>
        <li class="contact item6">
          <a href="https://pinterest.com"><i class="fa fa-pinterest"></i></a>
        </li>
      </ul>
    </div>
  </div>
</div>

社交 link 之前属性

social link to before property

html

css

pseudo-element

社交 link 之前 属性

social link to before property

html

css

pseudo-element

社交 link 之前属性