如何指定li下边框的长度/宽度？解决下边框占满宽度问题

针对你提出的「指定li下边框长度」和「让下边框不占满li全部宽度」的需求，这里提供几种实用的实现方案，结合你的现有代码修改即可：

方案一：使用CSS伪元素（推荐，灵活性最高） #

通过给li添加伪元素来模拟下边框，能自由控制边框的宽度、位置和样式：

.aboutusNav a {
  text-decoration: none;
  font-weight: normal;
  color: black;
}

.aboutusNav {
  position: relative; /* 为伪元素定位提供基准 */
  display: inline-block;
}

/* 默认状态下的透明边框（保持布局一致） */
.aboutusNav::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%; /* 让线条居中 */
  transform: translateX(-50%); /* 水平偏移实现精准居中 */
  width: 60%; /* 自定义边框宽度，比如设置为内容宽度的60% */
  height: 3px;
  background-color: transparent;
  transition: background-color 0.3s ease; /* 添加过渡动画更流畅 */
}

/* hover时显示指定颜色的边框 */
.aboutusNav:hover::after {
  background-color: #EB644C;
}

方案二：用背景渐变模拟边框 #

利用CSS背景渐变创建短线条，无需额外定位：

.aboutusNav a {
  text-decoration: none;
  font-weight: normal;
  color: black;
}

.aboutusNav {
  display: inline-block;
  padding-bottom: 5px; /* 给线条预留空间 */
  /* 默认透明背景渐变 */
  background-image: linear-gradient(transparent, transparent);
  background-repeat: no-repeat;
  background-position: center bottom; /* 线条居中靠下 */
  background-size: 60% 3px; /* 第一个值是宽度，第二个是线条高度 */
  transition: background-image 0.3s ease;
}

/* hover时替换为有色渐变 */
.aboutusNav:hover {
  background-image: linear-gradient(#EB644C, #EB644C);
}

方案三：通过内边距+子元素边框实现 #

如果需要给li预留左右留白，可给li设置内边距，再给内部的a标签添加边框：

.aboutusNav {
  display: inline-block;
  padding: 0 20px; /* 左右内边距，拉开li和内容的距离 */
}

.aboutusNav a {
  text-decoration: none;
  font-weight: normal;
  color: black;
  display: inline-block;
  border-bottom: 3px solid transparent;
  transition: border-color 0.3s ease;
}

.aboutusNav:hover a {
  border-bottom-color: #EB644C;
}

你可以根据实际布局需求选择合适的方案，其中伪元素方案适配性最强，能应对大部分场景。

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