Создайте меню сайта, как показано на видео. При наведении курсора мыши на пункт меню из левого нижнего угла расширяется фон цветом #ffb21d на всю область ссылки.
Код примера скопирован в буфер
<!DOCTYPE html><htmllang="ru"><head><metacharset="utf-8"><title>Меню</title><style>a {
position: relative; /* Относительное позиционирование */text-decoration: none; /* Убираем подчёркивание */padding: 5px; /* Расстояние от текста до края */color: #3e3e3e; /* Цвет ссылок */font: bold1em 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><ahref="#">Главная</a><ahref="#">Портфолио</a><ahref="#">Блог</a><ahref="#">Контакты</a></nav></body></html>
