screenshot# the code was perfect in CodePen, what i run in a firfox or chrome this problem appears. i fixed it in ‘browser inspect" with "line-hight" but when i write the solution in VScode, nothing is solved. the code was perfect in CodePen, what i run in a firfox or chrome this problem appears. i fixed it in ‘browser inspect" with "line-hight" but when i write the solution in VScode, nothing is solved.
.card21 {
grid-area: z;
background-color: #000;
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.socials {
width: 550px;
display: flex;
align-items: center;
justify-content: center;
margin: 20px;
}
ul {
display: contents;
transform: translate(-50%, -50%);
border-radius: 15px;
margin: 0 auto;
}
ul li {
list-style: none;
}
ul li a {
width: 80px;
height: 80px;
background-color: #fff;
text-align: center;
line-height: 0px;
font-size: 35px;
margin: 0 10px;
display: block;
border-radius: 50%;
position: relative;
overflow: hidden;
border: 3px solid #fff;
z-index: 1;
margin-bottom: 20px;
flex-basis: 50%; // this makes sure there are two items per row
}
ul li a .icon {
position: relative;
color: #262626;
transition: .5s;
z-index: 3;
}
ul li a:hover .icon {
color: #fff;
transform: rotateY(360deg);
}
ul li a:before {
content: "";
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 100%;
background: #f00;
transition: .5s;
z-index: 2;
}
ul li a:hover:before {
top: 0;
}
ul li:nth-child(1) a:before {
background: #3b5999;
}
ul li:nth-child(2) a:before {
background: #55acee;
}
ul li:nth-child(3) a:before {
background: #0077b5;
}
ul li:nth-child(4) a:before {
background: #dd4b39;
}
<div class="box card21">
<div class="socials">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<ul>
<li>
<a href="#"> <i class="fab fa-facebook-f icon"></i>
</a>
</li>
<li>
<a href="#"><i class="fab fa-twitter icon"></i></a>
</li>
<li>
<a href="#"><i class="fab fa-linkedin-in icon"></i></a>
</li>
<li>
<a href="#"><i class="fab fa-google icon"></i></a></li>
<li>
<a href="#"><i class="fab fa-telegram icon"></i></a></li>
<li>
<a href="#"><i class="fab fa-behance icon"></i></a></li>
</ul>
</div>
</div>
2
Answers
check this
Just change the following code: