ВСЕМ ПРИВЕТ, ПОДСКАЖИТЕ ПОЧЕМУ ИКОНКИ НАХОДЯТСЯ ПОД ЭЛЕМЕНТОМ :before ? И КАК ЭТО МОЖНО ИСПРАВИТЬ ?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>about</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<div class="wrap">
<div class="social">
<ul>
<li><a href=""><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
<li><a href=""><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
<li><a href=""><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
<li><a href=""><i class="fa fa-vk" aria-hidden="true"></i></a></li>
</ul>
</div>
</div>
</body>
</html>
|
Код:
|
* {
padding: 0;
margin: 0;
}
body {
padding: 0;
margin: 0;
}
ul {
padding: 0;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
ul li {
list-style-type: none;
}
ul li a {
position: relative;
text-decoration: none;
width: 40px;
height: 40px;
text-align: center;
line-height: 40px;
display: block;
margin: 10px;
border: 1px solid #232323FF;
overflow: hidden;
transition: .2s;
}
ul li a .fa {
}
ul li a::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: #81F0C9FF;
bottom: -100%;
left: 0;
transition: .2s;
}
ul li a:hover::before {
bottom: 0; |