Создайте меню сайта, как показано на видео. При наведении курсора мыши на пункт меню ниже текста появляется линия толщиной 3 пикселя и цветом #e0591e.
<!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: #e0591e; /* Цвет фона псевдоэлемента */
z-index: -1; /* Располагается позади текста */
width: 100%; /* Занимает всю ширину */
height: 3px; /* Высота псевдоэлемента */
transition: 0.2s; /* Время перехода */
transform: scaleX(0); /* Трансформируем размер до нуля */
}
a:hover::after {
transform: scaleX(1); /* Масштабируем до исходного значения */
}
</style>
</head>
<body>
<nav>
<a href="#">Главная</a>
<a href="#">Портфолио</a>
<a href="#">Блог</a>
<a href="#">Контакты</a>
</nav>
</body>
</html>