HTML 和 CSS 导航栏文本会移动，但动画背景颜色不会移动

Question

我正在制作一个网站，我在网上发现了一个很酷的导航栏，我正在使用它，但是当我尝试使用

text-align: right;

将其移动到屏幕右侧时，文本会移动，但动画背景不会移动（我的网站是.php 文件（如果有帮助的话）

这是代码：

* {
  margin: 0;
  padding: 0;
  font-family: Verdana;
}

nav {
  text-align: right;
  position: relative;
  width: 100%;
  height: 50px;
  background-color: #34495e;
  font-size: 0;
}

nav a {
  line-height: 50px;
  height: 100%;
  font-size: 15px;
  display: inline-block;
  position: relative;
  z-index: 1;
  text-decoration: none;
  text-transform: uppercase;
  text-align: center;
  color: white;
  cursor: pointer;
}

nav .animation {
  text-align: right;
  position: absolute;
  height: 100%;
  top: 0;
  z-index: 0;
  transition: all .5s ease 0s;
  border-radius: 8px;
}

a:nth-child(1) {
  width: 100px;
}

a:nth-child(2) {
  width: 110px;
}

a:nth-child(3) {
  width: 100px;
}

a:nth-child(4) {
  width: 160px;
}

a:nth-child(5) {
  width: 120px;
}

nav .start-home,
a:nth-child(1):hover~.animation {
  width: 100px;
  left: 0;
  background-color: #1abc9c;
}

nav .start-about,
a:nth-child(2):hover~.animation {
  width: 110px;
  left: 100px;
  background-color: #e74c3c;
}

nav .start-blog,
a:nth-child(3):hover~.animation {
  width: 100px;
  left: 210px;
  background-color: #3498db;
}

nav .start-portefolio,
a:nth-child(4):hover~.animation {
  width: 160px;
  left: 310px;
  background-color: #9b59b6;
}

nav .start-contact,
a:nth-child(5):hover~.animation {
  width: 120px;
  left: 470px;
  background-color: #e67e22;
}

<nav>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Blog</a>
  <a href="#">Portefolio</a>
  <a href="#">Contact</a>
  <div class="animation start-home"></div>
</nav>

我是 HTML 和 CSS 新手，我尝试使用

justify-items: right;

和

justify-content: right;

但这也行不通。

任何人都可以帮忙吗？ 谢谢

Answer 1

如果你使用

nav {
  text-align       : right;

那么你必须改变一切

a:nth-child(3):hover~.animation {
  left : ...

到

a:nth-child(3):hover~.animation {
  right : ...

代码示例：

// bonus:
const 
  e_nav  = document.querySelector('nav')
, e_anim = e_nav.querySelector('div.animation')
  ;
e_nav.addEventListener('click', (e) =>
  {
  if (e.target.matches('nav > a'))
    {
    e_anim.className = 'animation start-' + e.target.textContent.toLowerCase();
    }  
  })

* {
  margin      : 0;
  padding     : 0;
  font-family : Verdana;
  }
nav {
  text-align       : right;
  position         : relative;
  width            : 100%;
  height           : 50px;
  background-color : #34495e;
  font-size        : 0;
  --a-width        : 120px;
  }
nav a {
  line-height     : 50px;
  height          : 100%;
  display         : inline-block;
  position        : relative;
  z-index         : 1;
  text-decoration : none;
  text-transform  : uppercase;
  text-align      : center;
  color           : white;
  cursor          : pointer;
  font-size       : 15px;
  width           : var(--a-width);
  }
nav .animation {
  position      : absolute;
  height        : 100%;
  width         : var(--a-width);
  top           : 0;
  z-index       : 0;
  transition    : all .5s ease 0s;
  border-radius : 8px;
  }
nav .start-home,
a:nth-child(1):hover~.animation {
  right            : calc( var(--a-width) * 4);
  background-color : #1abc9c;
  }
nav .start-about,
a:nth-child(2):hover~.animation {
  right            : calc( var(--a-width) * 3);
  background-color : #e74c3c;
  }
nav .start-blog,
a:nth-child(3):hover~.animation {
  right            : calc( var(--a-width) * 2);
  background-color  : #3498db;
  }
nav .start-portefolio,
a:nth-child(4):hover~.animation {
  right            : calc( var(--a-width) * 1);
  background-color : #9b59b6;
  }
nav .start-contact,
a:nth-child(5):hover~.animation {
  right            : 0;
  background-color : #e67e22;
  }

<nav>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Blog</a>
  <a href="#">Portefolio</a>
  <a href="#">Contact</a>
  <div class="animation start-home"></div>
</nav>