CSS边框疑问：hover时border-bottom正常但border-top会挤压内容

嘿，这个问题我之前折腾CSS的时候也碰到过，本质是CSS盒模型的默认规则在搞怪！

问题原因 #

默认情况下，CSS的box-sizing属性值是content-box，这意味着元素的总高度 = height属性值 + padding + border + margin。

看你提供的代码，li a设置了固定的height:50px：

• 当hover时添加border-top:50px solid xxx，元素总高度会变成50px（height） + 50px（border-top）=100px，比原高度多出50px，自然会把下方的内容挤下去。
• 而border-bottom看起来“适配良好”，其实它同样会让元素总高度变成100px，但因为border是加在元素底部外侧，视觉上可能你觉得是向下延伸而非挤压（如果菜单不是最后一项，其实也会挤下面的元素哦），所以产生了“适配良好”的错觉。

解决方案 #

这里给你三种常用的解决思路，按需选择：

1. 提前预留border位置 #

给li a默认设置透明的border-top，hover时仅修改边框颜色。这样元素总高度始终保持不变，不会触发挤压：

ul { 
  list-style-type: none; 
  margin: 0; 
  padding: 0; 
  width: 15%; 
  position: fixed; 
  background-color: yellow; 
} 
li a { 
  display: block; 
  height: 50px; 
  color: red; 
  text-decoration: none; 
  text-align: center; 
  text-transform: uppercase; 
  line-height: 50px; 
  transition: .2s all linear; 
  border-top: 50px solid transparent; /* 提前预留边框位置 */
} 
li a:hover { 
  color: white; 
  border-top-color: #你的目标颜色; /* hover时仅修改颜色 */
}

2. 改用border-box盒模型 #

设置box-sizing: border-box后，border和padding会被包含在你设置的height/width内，元素总高度不会因为添加border而变化。不过要注意调整height值，避免内容被边框覆盖：

ul { 
  list-style-type: none; 
  margin: 0; 
  padding: 0; 
  width: 15%; 
  position: fixed; 
  background-color: yellow; 
} 
li a { 
  display: block; 
  height: 100px; /* 调整高度，预留border空间 */
  color: red; 
  text-decoration: none; 
  text-align: center; 
  text-transform: uppercase; 
  line-height: 100px; 
  transition: .2s all linear; 
  box-sizing: border-box; /* 关键属性，把border纳入height计算 */
} 
li a:hover { 
  color: white; 
  border-top: 50px solid #你的目标颜色; 
}

3. 用伪元素模拟border #

通过绝对定位的伪元素实现边框效果，完全不影响原元素的盒模型，也就不会挤压内容：

ul { 
  list-style-type: none; 
  margin: 0; 
  padding: 0; 
  width: 15%; 
  position: fixed; 
  background-color: yellow; 
} 
li a { 
  display: block; 
  height: 50px; 
  color: red; 
  text-decoration: none; 
  text-align: center; 
  text-transform: uppercase; 
  line-height: 50px; 
  transition: .2s all linear; 
  position: relative; /* 让伪元素相对当前元素定位 */
} 
li a:hover::before { 
  content: ''; 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 50px; 
  background-color: #你的目标颜色; /* 模拟border-top的视觉效果 */
  z-index: -1; /* 放在文字下方，避免遮挡 */
}
li a:hover { 
  color: white; 
}

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