如何限制下划线宽度并将其居中对齐？

问题根源 #

你当前的伪元素下划线用left:0固定左对齐，把宽度改成80%后自然偏左，align center对绝对定位元素无效。要实现下划线相对于文本居中，得调整定位逻辑，同时给父元素设置正确的定位上下文。

修正代码 #

/* 先给父元素添加相对定位，让伪元素能基于导航文本定位 */
.elementor-item {
  position: relative;
}

.elementor-item:after {
  background-color: #E98B0D !important;
  height: 5px;   
  content: "";
  /* 设置绝对定位，基于父元素的位置范围 */
  position: absolute;
  bottom: 0;  
  width: 80%;    
  /* 核心居中逻辑：先将左边缘移到父元素中点，再向左偏移自身宽度的一半 */
  left: 50%;
  transform: translateX(-50%);
  border-radius: 4px;
  line-height: 2px;  
}

逻辑说明 #

• .elementor-item加position: relative是基础，否则伪元素的绝对定位会以页面整体为参考，而非导航文本
• left:50%将下划线的左边缘对齐到导航文本的水平中点
• transform: translateX(-50%)让下划线向左移动自身宽度的一半，最终实现下划线整体相对于导航文本居中

这个写法适配任意百分比宽度的下划线，都能保持居中效果。

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