向后导航动画

Question

为什么导航栏上的动画，那条红线，如果你在nav li a::after上设置100%的宽度向后工作，而不是从左到右，它应该是什么样子，或者我想怎么做?

HTML

<nav>
<ul>
<li><a href="index.php">Domů</a></li>
<li><a href="switcher.php">Fun Switcher</a></li>
<li><a href="#">Radio</a></li>
<li><a href="#">Fotky</a></li>
<li><a href="#">Games</a></li>
<li><a href="#">Chat</a></li>
</ul>
</nav>

CSS

nav {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
background: linear-gradient(#ffffff, #f5f5f5);
grid-area: nav;
font-weight: bold;
}
nav ul {
list-style: none;
margin: 0;
display: flex;
justify-content:flex-start;
align-items: center;
padding: 1em 0;
}
nav li a {
text-decoration: none;
color: #000000;
padding-left: 3em;
position: relative;
transition: all ease-in-out 250ms;
}
nav li a::after {
content:'';
position: absolute;
display: block;
height: 0.4em;
background-color: red;
bottom: -1em;
/* width: 100%; look for whole line */
transition: all ease-in-out 250ms;
}
nav li a:hover::after {
width: 60%;
}
nav li a:hover{
color: red;
}

Answer 1

你想改变多个东西，因为一些css属性不适合你的html类…

nav {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
background: linear-gradient(#ffffff, #f5f5f5);
grid-area: nav;
font-weight: bold;
}
nav ul {
list-style: none;
margin: 0;
display: block;
}
nav li {
padding: 13px 20px;
display: inline-block;
}
nav li a {
text-decoration: none;
color: #000000;
position: relative;
transition: all ease-in-out 250ms;
}
nav li a::after {
content:'';
position: absolute;
display: block;
height: 0.4em;
background-color: red;
bottom: -1em;
/* width: 100%; look for whole line */
transition: all ease-in-out 350ms;
left: 0;
width:0;
}
nav li a:hover::after {
width: 100%;
}
nav li a:hover{
color: red;
}

<nav>
<ul>
<li><a href="index.php">Domů</a></li>
<li><a href="switcher.php">Fun Switcher</a></li>
<li><a href="#">Radio</a></li>
<li><a href="#">Fotky</a></li>
<li><a href="#">Games</a></li>
<li><a href="#">Chat</a></li>
</ul>
</nav>

Answer 2

这是您可以接受的解决方案吗?

`a{
display: flex;
align-items: center;
justify-content: center;
}`

添加到你的CSS代码

这是我的代码:https://codepen.io/oskedram/pen/abWREpg