如何添加padding-left时不偏移居中div的内容？

现有实现逻辑 #

当前通过两层嵌套相对定位容器实现导航文本水平居中：

• 外层容器设置left: 50%，相对父级右移自身宽度的50%
• 内层容器设置left: -50%，相对外层左移自身宽度的50%
• 两层偏移叠加后，内层内容刚好在父容器内水平居中

现有代码如下：

原有CSS #

* {
  box-sizing: border-box;
}

body {
  background-image: url("bg1.jpeg");
  background-size: cover;
  margin: 0;
}

.navbar,
.navbar-news {
  font-family: Arial, Helvetica, sans-serif;
  background-color: dodgerblue;
  font-size: small;
  color: white;
  overflow: hidden;
  width: 100%;
}

.navbar-news-outer,
.navbar-news-inner {
  margin: 0mm;
  float: left;
  position: relative;
}

.navbar-news-outer {
  left: 50%
}

.navbar-news-inner {
  left: -50%;
}

.navbar-news a,
.navbar-news i {
  color: bisque;
  transition: color .3s ease-out;
  transition: padding-left .3s ease-out;
}

.navbar-news a:hover {
  color: blueviolet;
}

.navbar-news a:hover i {
  color: blueviolet;
  padding-left: 10px;
}

原有HTML #

<div class="navbar-news">
  <div class="navbar-news-outer">
    <div class="navbar-news-inner">
      <span>
      Newest Blog Post: Cybersecurity in the Era of Cloud Infrastructure <a>READ HERE <i class="fa fa-caret-right"></i></a>
      </span>
    </div>
  </div>
</div>

偏移原因 #

padding属于盒模型尺寸计算的一部分，给caret图标添加padding-left:10px后，这10px会被计入内层容器的总内容宽度。而内层容器left: -50%的偏移值是基于自身宽度计算的，宽度变化后居中偏移量同步改变，最终导致整体内容位置偏移。
另外原有代码中transition属性重复声明两次，后一条规则会覆盖前一条，实际只有内边距属性存在过渡效果，颜色变化的过渡会失效。

修复方案 #

用不占据文档流空间的transform属性实现图标位移，完全不影响父容器宽度计算，改动最小且性能更优：

.navbar-news a,
.navbar-news i {
  color: bisque;
  /* 合并过渡声明，同时支持颜色和位移动画 */
  transition: color .3s ease-out, transform .3s ease-out;
}

.navbar-news a:hover {
  color: blueviolet;
}

.navbar-news a:hover i {
  color: blueviolet;
  /* 移除会撑宽容器的padding-left，用横向位移实现10px右滑效果 */
  transform: translateX(10px);
}

方案说明 #

• transform的位移效果是视觉层面的渲染，不会改变元素在文档流中占据的空间，内层容器宽度不会发生变化，居中逻辑不受任何影响，其余内容完全不会移位
• 动画效果与padding实现的滑动完全一致，且transform由GPU合成渲染，不会触发页面重排，动画流畅度更高
• 修复了原有代码中transition重复声明导致颜色过渡失效的问题

内容的提问来源于stack exchange，提问作者mowsie2k