Transitions and page update

Question

I’m learning css now through websites and courses. When I create an element and want to make Hover in it, I put Transition in the element. The question is: When I refresh my page (F5), the element is shown and then disappears. It’s like an initial state which is not actually initial.

Very clear example: I speak for my css that I want to margin and padding 0 in html. So far so good. Then I create a Nav bar and say that it has 20 of margin and padding (example). If I put transition in it of . 2s, when I refresh the page I can see it leaving the state 0 and going to the 20 in . 2s. How to resolve this? If I understood how this works, I could solve all the other elements that are with the same problem

I’m going to put the part of Nav that I’m having trouble with. When I refresh the page, I can see the Transition of the border-bottom of it. (before giving the Hover)

body {
  font-family: "Roboto", "Arial", sans-serif;
}

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
  color: #4a4a4a;
}

html {
  font-size: 62.5%;
  font-weight: 500;
  color: #4a4a4a;
  background-color: #fff;
}

body {
  box-sizing: border-box;
  font-size: 1.6em;
}

.header {
  height: 116vh;
  background-image: linear-gradient(to right bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.3)), url(https://placecage.com/200/200);
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
.header__bar-top {
  background-color: #3eafc2;
  height: 5px;
}
.header__nav {
  height: 100px;
  width: 100%;
  padding: 15px 20px;
}
.header__nav ul {
  display: inline-block;
  margin: 10px 40px;
  text-transform: uppercase;
  list-style: none;
}
.header__nav__logo {
  height: 40px;
  width: 200px;
  background-image: url("../img/color4.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  display: inline-block;
  transition: background-image 0.4s;
}
.header__nav__list {
  float: right;
  padding: 13px;
}
.header__nav__list li {
  margin-right: 20px;
  display: inline-block;
}
.header__nav__list li:last-of-type {
  margin-left: 30px;
}
.header__nav__list li a:link, .header__nav__list li a:visited {
  display: inline-block;
  text-decoration: none;
  color: rgba(238, 238, 238, 0.5);
  padding-bottom: 8px;
  border-bottom: 2px solid transparent;
  transition: border-bottom 0.2s, color 0.1s;
}
.header__nav__list li a:hover {
  color: #fff;
  border-bottom: 2px solid #fff;
}

.sobre {
  background-color: #eee;
  height: 100vh;
  clip-path: polygon(0 0, 100% 0, 100% 75%, 0 100%);
  text-align: right;
}
.sobre__img {
  height: auto;
  width: 80vh;
  padding-top: 50px;
}

.conhecimentos__img {
  margin-bottom: -3px;
  height: 300px;
}

.objetivos {
  height: 100vh;
  background-color: #eee;
}

/*# sourceMappingURL=style.css.map */

<link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,500,700" rel="stylesheet">

<header id="inicio" class="header">
	<div class="header__bar-top"></div>

	<nav class="header__nav">
		<a href="index.html">
			<div class="header__nav__logo"></div>
		</a>
		<ul class="header__nav__list">
			<li><a id="a" href="#inicio">Inicio</li></a>
			<li><a href="#sobre">Sobre</a></li>
			<li><a href="#conhecimentos">Conhecimentos</a></li>
			<li><a href="#portifolio">Portifólio</a></li>
			<li><a href="#objetivos">Objetivos</a></li>
			<li><a href="https://github.com/Alissin4444">Visualizar código</a></li>
		</ul>
	</nav>

	<div class="header__main">
		<span class="header__main__title"></span>
		<span class="header__main__sub"></span>
		<span class="header__main__button"></span>
	</div>

</header>

<section id="sobre" class="sobre">
	<h1>Bem, conheça um pouco sobre mim :)</h1>
	<span class="sobre__main">Texto aleatório, Texto aleatório, Texto aleatório, Texto aleatório</span>
</section>

<section id="conhecimentos" class="conhecimentos">
	<img class="conhecimentos__img" src="assets/img/skills1.png" alt="avatarSkills">
	<h2>Skills como desenvolvedor</h2>
</section>

<section class="portifolio">

</section>

<section class="objetivos">

</section>

<footer>

</footer>