.panel-1 .default-menu-2 {
position: absolute;
top: 30%;
left: 50%;
transform: transLateX(-50%) transLateY(-50%);
background-color: #000000;
width: 80%;
text-align: center;
}
.default-menu-2 li {
display: inline-block;
}
.default-menu-2 li a {
position: relative;
text-decoration: none;
display: inline-block;
color: #DDDDDD;
font-weight: bold;
font-size: 16px;
padding: 0 21px;
}
.default-menu-2 li span:before, li span:after {
content: '';
position: absolute;
transition: transform .5s ease;
}
.link-2 {
display: inline-block;
overflow: hidden;
}
span:before {
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background: #76DAFF;
transform: translateX(-100%);
}
span {
border: 1px solid violet;
}
span:hover::before {
transform: translateX(0);
}
<div class="panel-1">
<div class="default-menu-2">
<li><a href="#" class="link-2"><span>Strona główna</span></a></li>
</div>
</div>
Możesz dopracować to menu, bo przy powiększeniu Ctrl++ zostaje na ekranie piksel/piksele.