Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 07.01.2018, 22:10
Новичок на форуме
Отправить личное сообщение для daramylove Посмотреть профиль Найти все сообщения от daramylove
 
Регистрация: 21.12.2017
Сообщений: 4

ПРОБЛЕМА С ИКОНКАМИ }:help:
ВСЕМ ПРИВЕТ, ПОДСКАЖИТЕ ПОЧЕМУ ИКОНКИ НАХОДЯТСЯ ПОД ЭЛЕМЕНТОМ :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;
Ответить с цитированием
  #2 (permalink)  
Старый 07.01.2018, 22:29
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

daramylove,
цвета странные ...
Сообщение от daramylove
background: #81F0C9FF;
Сообщение от daramylove
И КАК ЭТО МОЖНО ИСПРАВИТЬ ?
ul li a::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: #B8DEFF;
bottom: -100%;
left: 0;
transition: .2s;
z-index: -1;
}
Ответить с цитированием
  #3 (permalink)  
Старый 07.01.2018, 22:36
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

daramylove,
<!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">
  <style type="text/css">*{
    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 #0000CD;
    overflow:hidden;
    transition:.2s;
  }

  ul li a .fa{
    color:#0000CD;
  }

  ul li a::before{
    content:'';
    position:absolute;
    width:100%;
    height:100%;
    background:#0067C2;
    bottom:-100%;
    left:0;
    transition:.2s;
    z-index:-1;
  }

  ul li a:hover::before{
    bottom:0;
  }

  ul li a:hover .fa{
    color:#FFFFFF;
  }
  </style>
</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>

Последний раз редактировалось рони, 07.01.2018 в 22:43.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Проблема с радио кнопками px379 Общие вопросы Javascript 8 29.07.2013 09:30
Проблема с обработкой ескольких .hover() anocean jQuery 3 15.06.2012 22:43
Проблема с Popup окном vovuslik jQuery 5 12.06.2010 16:12
Проблема с CSS COKOJIOB (X)HTML/CSS 5 04.08.2009 14:19
Проблема спама lliberty AJAX и COMET 1 12.03.2009 16:47