如何在CSS中缩短下边框长度？前端新手技术问询

嘿，刚入门前端碰到这种细节调整太正常啦！你现在的全长度下边框是用border-bottom实现的对吧？要改成3/4长度，其实不用硬改某个单一属性，而是有几种灵活的实现方式，我给你列两个最常用的：

• 方案一：调整元素宽度+居中（适合元素本身不需要占满父容器的情况）
  如果你的对比数值元素不需要撑满父容器的宽度，直接修改它的width属性为75%，再加上margin: 0 auto让元素和边框一起居中，这样边框自然就是3/4长度啦。代码大概是这样：

  .value-compare {
    border-bottom: 1px solid #你的边框颜色;
    width: 75%; /* 对应3/4长度 */
    margin: 0 auto; /* 让元素和边框水平居中 */
  }
  

• 方案二：用伪元素实现（推荐，不影响元素本身布局）
  要是元素本身需要保持100%宽度，只是边框要短一截，用伪元素是最优解。给目标元素加相对定位，然后用::after伪元素生成一个3/4宽度的“边框”，定位在元素底部中间：

  .value-compare {
    position: relative; /* 给伪元素做定位参考 */
    /* 保留你原来的其他样式，比如文字排版、内边距之类的 */
  }
  .value-compare::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%); /* 让伪元素水平居中 */
    width: 75%; /* 3/4长度 */
    height: 1px; /* 和你原来的border-bottom厚度保持一致 */
    background-color: #你的边框颜色;
  }
  

  这种方法不会改变元素本身的布局，完全只针对“边框”做调整，特别适合对比数值这种需要文字占满宽度但边框要短的场景——你只需要把原来的border-bottom样式删掉，换成这个伪元素写法就行。

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