1)Вот пример: в a.navig:after у меня применен background-color: red. a.navig:after отвечает за линию, которая будет появляться при наведении в a.navig:hover:after. Не пойму, типа потому, что я линию создал, как блок, у неё есть бэкграунд (задал ширину, высоту...)
body {
margin: 0;
}
div.cover {
width: 100vw;
height: 100vh;
background: url('../images/travel_bg.jpeg') center;
background-size: cover;
margin: 0;
}
div.container {
padding: 20px;
display: inline-flex;
}
a.navig {
font-size: 25px;
color: #000;
font-family: 'Baloo Tamma 2', cursive;
margin: 0 20px;
text-decoration: none;
}
a.navig:hover {
color: red;
transition: 0.2s;
}
a.navig:after {
content: '';
width: 100%;
height: 3px;
background-color: red;
display: block;
opacity: 0;
transition: 0.3s;
}
a.navig:hover:after {
opacity: 1;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<link href="https://fonts.googleapis.com/css2?family=Alata&family=Baloo+Tamma+2&display=swap" rel="stylesheet">
<title>Traveler</title>
</head>
<body>
<div class='cover'>
<div class='container'>
<a class='navig' href='#'>Air tickets</a>
<a class='navig' href='#'>R/w tickets</a>
<a class='navig' href='#'>Hotels</a>
<a class='navig' href='#'>Buses</a>
</div>
</div>
</body>
</html>
Также, объясните, если не трудно, почему в a.navig:after нужен display: block? Без него линия не отображается. Я предполагаю, что из-за того, что родитель(div.container) у a.navig:after имеет display: inline-flex. Подскажите, прав или нет?