CSS Transitions firing on page load - html

Question

I'm writing a simple website and have pretty much the same issue as described in these two posts:
Stop CSS transition from firing on page load
Chrome transition fires on page load when form element added
The issue is aparent when testing in Brave Browser, not for example in Edge. Although I have not used any <form> tag in my site..
Anyway, I can resolve this issue as described in those posts by putting a <script> </script> into the footer. My problem is, that I have a bad habit of letting VS Studio format my code with CTRL-K + CTRL + D, which will delete the space between the script tags. Also, copying the footer to a new file will do the same, thus I quite often have to resolve the same issue again and again.
Question now is: Since the linked posts are quite old therefore this issue has been known for quite a long time, is there another - better - way to resolve it?
Transition Code in Question:
nav {
position: relative;
background-color: #61625B;
width: 100%;
height: 100px;
}
nav ul {
position: absolute;
bottom: 0;
width: 70%;
list-style: none;
padding: 0 15%;
display: flex;
margin: 0;
}
nav li {
width: 125px;
text-align: center;
}
.navunderline {
width: 125px;
height: 0;
margin: 5px 0 0 0;
background-color: #DAD9D7;
transition: 500ms;
}
nav a {
color: #DAD9D7;
}
nav a:hover {
text-decoration: none;
}
nav li:hover .navunderline {
height: 5px;
margin: 0;
}
#selected .navunderline {
height: 5px;
margin: 0;
}
<nav>
<ul>
<li>Unternehmen<div class="navunderline"></div></li>
<li>Leistungen<div class="navunderline"></div></li>
<li>Referenzen<div class="navunderline"></div></li>
<li>News<div class="navunderline"></div></li>
<li>Kontakt<div class="navunderline"></div></li>
</ul>
</nav>