html - 修复标题中的动画下划线

Question

我需要修复标题中的动画下划线。
我想将其固定在事件页面下。
下划线必须每次都回到事件页面页面。

我还添加了屏幕截图(第一个是我现在拥有的，第二个是我想要的): https://gyazo.com/bf66aba84f4fef0440a11a85dcf83aed https://gyazo.com/c6aa43d5e3ac4bf014e2216467f7ddac

这是我启发(默认代码)的地方:Codepen.io

在演示页面中，您还标记了事件下划线位置。我会在下面添加它。我用媒体查询做到了。

如果你能帮助我，我将非常高兴。

谢谢。

---

风格:

 @media screen and (max-width: 1530px) {
.header {background-size: auto 150%}
.aktivniopenz {margin-left: 8% !important}}

@media screen and (max-width: 1290px) {
.aktivniubytovani {margin-left: 27% !important}
.aktivnicenik {margin-left: 45% !important}
.aktivnifotogalerie {margin-left: 63.5% !important}}

@media screen and (max-width: 1190px) {
.headertext {margin-right: auto;left: 0;margin-left: 355px}
.aktivniopenz {margin-left: 9% !important}
.aktivnicenik {margin-left: 45.5% !important}
.aktivnikontakt {margin-left: 82.5% !important}}

@media screen and (max-width: 1000px) {
.aktivniubytovani {margin-left: 28% !important}
.aktivnicenik {margin-left: 46.5% !important}
.aktivnifotogalerie {margin-left: 64% !important}
.aktivnikontakt {margin-left: 83% !important}}

#container {
width: 100%;
margin: -60px auto ;
font-family: main2 !important;font-weight: 600; letter-spacing: 3.5px; font-size: 1.1em;}

ul li {
display: inline;
text-align: center;}

.headeraa {
display: inline-block;
width: 19%;
padding: .75rem 0;
margin: 0;
text-decoration: none;
color: #185fc1;}

.headeraa:hover {text-decoration: none !important;color: #1d87eb}

.one:hover ~ hr {
margin-left: 2%;}

.two:hover ~ hr {
margin-left: 21%;}

.three:hover ~ hr {
margin-left: 41%;}

.four:hover ~ hr {
margin-left: 60.5%;}

.five:hover ~ hr {
margin-left: 80.5%;}

hr {height: .25rem  !important;
width: 15%;
margin: 0 0 0 2%;
background: tomato !important;
border: none;
transition: .3s ease-in-out;
display: inline-block;}

@font-face {
font-family: main2;
src: url("fonty/main2.otf")}

.aktivniopenz {height: .24rem  !important;
           width: 10%;
           margin: 0 0 0 7%;margin-top: 21.5px; box-shadow: 0px 0px 40px 0px; 
               background: tomato !important;
               border: none;
               transition: none;
               display: inline-block;}

.aktivniubytovani {    height: .24rem  !important;
                   width: 10%;
                   margin: 0 0 0 26%;margin-top: 21.5px; box-shadow: 0px 0px 40px 0px; 
                   background: tomato !important;
                   border: none;
                   transition: none;
                   display: inline-block;}

.aktivnicenik {    height: .24rem  !important;
               width: 10%;
               margin: 0 0 0 44.6%;margin-top: 21.5px; box-shadow: 0px 0px 40px 0px; 
               background: tomato !important;
               border: none;
               transition: none;
               display: inline-block;}

.aktivnifotogalerie {    height: .24rem  !important;
                     width: 10%;
                     margin: 0 0 0 63%;margin-top: 21.5px; box-shadow: 0px 0px 40px 0px; 
                     background: tomato !important;
                     border: none;
                     transition: none;
                     display: inline-block;}

.aktivnikontakt {    height: .24rem  !important;
                 width: 10%;
                 margin: 0 0 0 82%;margin-top: 21.5px; box-shadow: 0px 0px 40px 0px; 
                 background: tomato !important;
                 border: none;
                 transition: none;
                 display: inline-block;}

---

标题代码:

<div id="container">
        <div class="navbar-header">
            <button class="hamburger hamburger--spring navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" type="button">
                <span class="hamburger-box">
                    <span class="hamburger-inner"></span>
                </span>
            </button>
            <!--MALY NADPIS-->
            <span class="headertext2">Penzion Delta</span>
        </div>

        <div class="collapse  navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul>
                <li class="one">
                    <a href="index.html" class="openz headeraa">O PENZIONU</a>
                </li>

                <li class="two">
                    <a href="ubytovani.html" class="ubyt headeraa" style="color: #1d87eb !important;">UBYTOVÁNÍ</a>
                </li>
                <li class="three">
                    <a href="cenik.html" class="cen headeraa">CENÍK</a>
                </li>
                <li class="four">
                    <a href="fotogalerie.html" class="foto headeraa">FOTOGALERIE</a>
                </li>
                <li class="five">
                    <a href="kontakt.html" class=" kontakt headeraa ">KONTAKT</a>
                </li>
                <hr />
            </ul>
        </div>
    </div>
    <div class=" aktivniubytovani"></div>

Answer 1

根据您当前的结构，我想到了这个快速解决方案。

首先，

.one-active {
   margin-left: 2%;
}

.two-active {
  margin-left: 21%;
}

.three-active {
  margin-left: 41%;
}

.four-active {
  margin-left: 60.5%;
}

.five-active {
  margin-left: 80.5%;
}

在每个页面上将上述类添加到 hr 元素。

index.html 页面添加<hr class="one-active" />

ubytovani.html 页面添加 <hr class="two-active" />

cenik.html 页面添加 <hr class="three-active" />

fotogalerie.html 页面添加 <hr class="for-active" />

kontakt.html 页面添加 <hr class="five-active" />

这应该有效。如果您觉得此解决方案有帮助，请告诉我并将其标记为正确答案。谢谢。