1
在這個社會性部分，當你將鼠標懸停在Icon上時，通過將現有圖標推到頂部來顯示before屬性。所以，我想將它們鏈接到它們適當的鏈接，但是鏈接到之前的屬性。我試過在整個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">
\t \t <div class="iva-main">
\t \t <div class="team-heading" style="text-align: center;">Follow Us Here</div>
\t \t \t <div class="sociables-inner clearfix">
\t \t \t \t <ul style="display: flex;">
\t \t \t \t <li class="contact item1"><i class="fa fa-facebook"></i></li>
\t \t \t \t <li class="contact item2"><i class="fa fa-google-plus"></i></li>
\t \t \t \t <li class="contact item3"><i class="fa fa-twitter"></i></li>
\t \t \t \t <li class="contact item4"><i class="fa fa-instagram"></i></li>
\t \t \t \t <li class="contact item5"><i class="fa fa-dribbble"></i></li>
\t \t \t \t <li class="contact item6"><i class="fa fa-pinterest"></i></li>
\t \t \t \t </ul>
\t \t \t </div>
\t \t </div>
\t </div><!--contact socials-->
</body>
這是沒有任何錯誤的工作。鑑賞。 –