Создайте меню сайта, как показано на видео. При наведении курсора мыши на пункт меню ниже и выше текста появляются линии толщиной 2 пикселя и цветом #2ecc71.
<!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::before, a::after {
content: ''; /* Пустое содержимое */
position: absolute; /* Абсолютное позиционирование */
background-color: #2ecc71; /* Цвет фона псевдоэлемента */
z-index: -1; /* Располагается позади текста */
height: 2px; /* Высота линии */
width: 0; /* Скрываем линию */
transition: 0.3s; /* Время перехода */
}
a::before { /* Линия сверху */
right: 0; /* Положение правого края */
top: 0; /* Располагается вверху */
}
a::after { /* Линия снизу */
left: 0; /* Положение левого края */
bottom: 0; /* Располагается внизу */
}
a:hover::before, a:hover::after {
width: 100%; /* Ширина псевдоэлемента */
}
</style>
</head>
<body>
<nav>
<a href="#">Главная</a>
<a href="#">Портфолио</a>
<a href="#">Блог</a>
<a href="#">Контакты</a>
</nav>
</body>
</html>