如何使用CSS调整导航栏li的hover与激活高亮框尺寸

完全可以通过纯CSS实现导航栏hover、active状态的高亮框尺寸自定义，不需要修改原有DOM结构，以下是两种适配你现有代码的可直接落地的方案：

方案1：最小改动调整内边距（适配现有代码结构） #

你现有代码的高亮背景是直接附着在li a标签的原生块上，默认尺寸完全由a标签的内边距参数决定。只需要在hover、active的样式规则里单独调整内边距、配合外边距偏移，就能自定义高亮框的实际范围，操作时注意给外层li设置固定高度，抵消a标签内边距变化带来的导航布局偏移：

/* 追加li的固定高度配置，避免布局跳动 */
li {
  float: left;
  height: 48px; /* 和原有a标签的总高度保持一致 */
  display: flex;
  align-items: center;
}

/* 调整hover状态的高亮尺寸 */
li a:hover:not(.active) {
  background-color: #111;
  padding: 10px 12px; /* 自定义高亮块的内边距 */
  margin: 4px; /* 控制高亮块和导航边缘的间距 */
}

/* 调整active状态的高亮尺寸 */
li a.active {
  background-color: #4CAF50;
  padding: 10px 12px;
  margin: 4px;
}

方案2：伪元素独立高亮层（尺寸完全解耦） #

如果不想改动a标签本身的布局参数，可以用CSS伪元素生成独立的高亮背景层，高亮尺寸可以完全自由设置，和导航文字块没有布局耦合，甚至可以实现hover、active状态下高亮尺寸不一致、带圆角、位移动画等自定义效果：

/* 原有li a的基础样式保留，追加定位规则作为伪元素的参照 */
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  position: relative;
  z-index: 1;
}

/* 生成独立的高亮背景层 */
li a::before {
  content: '';
  position: absolute;
  /* 在这里自由定义高亮框的宽、高，实现尺寸自定义 */
  width: 85%;
  height: 75%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  border-radius: 3px;
}

/* hover状态的高亮层配置 */
li a:hover:not(.active)::before {
  background-color: #111;
}

/* active状态的高亮层配置，可单独调整尺寸 */
li a.active::before {
  background-color: #4CAF50;
  width: 95%; /* *将active状态的高亮框设置为比hover更大* */
  height: 85%;
}

注意：使用伪元素方案时，需要删掉原有li a:hover:not(.active)、.active规则里的background-color属性，避免双层背景叠影。

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