Создайте меню сайта, как показано на видео. При наведении курсора мыши на пункт меню из левого нижнего угла расширяется фон цветом #ffb21d на всю область ссылки.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Меню</title>
<style>
a {
position: relative; /* Относительное позиционирование */
text-decoration: none; /* Убираем подчёркивание */
padding: 5px; /* Расстояние от текста до края */
color: #3e3e3e; /* Цвет ссылок */
font: bold 1em Arial, Helvetica, sans-serif; /* Параметры шрифта */
}
a::after {
content: ''; /* Пустое содержимое */
position: absolute; /* Абсолютное позиционирование */
left: 0; /* Положение левого края */
bottom: 0; /* Располагается внизу */
background-color: #ffb21d; /* Цвет фона псевдоэлемента */
z-index: -1; /* Располагается позади текста */
width: 0; /* Занимает всю ширину */
height: 0; /* Высота псевдоэлемента */
transition: 0.2s; /* Время перехода */
}
a:hover::after {
width: 100%; /* Ширина */
height: 100%; /* Высота */
}
</style>
</head>
<body>
<nav>
<a href="#">Главная</a>
<a href="#">Портфолио</a>
<a href="#">Блог</a>
<a href="#">Контакты</a>
</nav>
</body>
</html>