* {
	margin: 0;
	padding: 0;
	font-family: sans-serif;
}

ul {
	position: absolute;
	top: 20%;
	left: 30%;
	list-style: none;
	display: flex;
}

/*пункты меню прижаты друг к другу, надо между ними создать пространство.
Делается это с помощью свойства padding и margin с неким числовым значением, 
которые не работает у строчных элементов, таких как гиперссылка. 
Поэтому пункты меню должны стать блочными и тогда можно применять к ним padding и margin. 
Эффект при наведении должен происходить плавно, пропишем свойство transition с задержкой в полсекунды.*/

ul li a {
	display: block;
	padding: 10px 20px;
	margin: 20px 0; /* Отступы для псевдоэлемента сверху и снизу от меню */
	text-decoration: none; /* Убираем подчеркивание */
	text-transform: uppercase; /* Заглавные буквы */
	color: #44c09d;
	font-weight: bold;
	transition: .5s;
	position: relative;
}

/*создаём меню с двумя линиями, которые будут появляться при наведении*/
ul li a:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-top: 1px solid #44c09d;
	border-bottom: 1px solid #44c09d;
	transform: scaleY(2); /* Масштабирование увеличение */
	transition: .5s; /* Плавный переход */

	/*Почему мы не можем просто нарисовать эти линии в HTML-разметке, а затем их спрятать? 
	Думаю, что неопытный верстальщик так и сделал бы. Но мы будем учиться все делать правильно. 
	Зачем загромождать HTML-страницу лишним кодом, когда существует псевдоэлемент before? 
	До меню (before), мы получили две линии, за счет однопиксельных бордюров и для жирности увеличили их в 2 раза.*/

	/*Теперь спрячем эти линии, сделав их прозрачными, чтобы при наведении они плавно появлялись.*/
	opacity: 0;

	/*добавим к обоим псевдоэлементам before и after порядок наложения слоев, 
	чтобы этот слой был ниже слоя с hover псевдоклассом и тогда эффект будет виден.*/
	z-index: -1;
}

/*Получается, что мы прописываем стили для псевдокласса hover псевдоэлемента before, звучит забавно.*/
ul li a:hover:before {
	transform: scaleY(1.2); /* Масштабирование уменьшение */
	opacity: 1;
}

/*Теперь копируем код с before и меняем это слово на after. 
Убираем из кода свойство opacity, меняем значение у transform и прописываем background.*/
ul li a:after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-top: 1px solid #44c09d;
	border-bottom: 1px solid #44c09d;
	transform: scale(0);
	transition: .5s; /* Плавный переход */
	background: #44c09d;
	/*добавим к обоим псевдоэлементам before и after порядок наложения слоев, 
	чтобы этот слой был ниже слоя с hover псевдоклассом и тогда эффект будет виден.*/
	z-index: -1;
}

ul li a:hover:after {
	transform: scale(1);
	
}

ul li a:hover {
	/*Теперь при наведении на пункты меню, появляются прямоугольники того же цвета, 
	все сливается. Пропишем цвет у пунктов меню - белым при hover эффекте.*/
	color: #fff;
	
}