1
Wenn Sie in diesem Kontaktbereich auf Symbol zeigen, wird die before-Eigenschaft angezeigt, indem Sie das vorhandene Symbol nach oben schieben. also, ich möchte sie mit ihren entsprechenden Links verknüpfen, aber mit der Vorher-Eigenschaft. Ich habe versucht, ein Anchor-Tag zu dem ganzen li hinzufügen, aber das ist das ganze Design versauen, wie ich Flex hier verwendet. Die related link, die ich dachte, würde helfen, aber es tat es nicht.social link to before property
Jede Art von Hilfe wird geschätzt.
(Vielen Dank im Voraus)
.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>
Das funktioniert ohne Fehler. Anerkennungen. –