Bootstrap 5.0 自定义标签页边框样式实现问题求助

开发者阿泽

2026-10-3

解决方案

你只需要修改样式代码即可实现需求，不需要改动HTML结构，修改后的CSS如下：

.categories {
  padding-top: 25px;
  background-color: #f5f6fa;
  /* 移除Bootstrap默认标签页底部边框 */
  border-bottom: none !important;
}
.categories .category__item {
  position: relative;
  /* 移除原有右侧边框 */
  border-right: none;
}
/* 伪元素实现右侧分割线，控制高度和底部间距 */
.categories .category__item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  /* 高度和文字字号保持一致 */
  height: 24px;
  width: 1px;
  background-color: #dcdcdc;
}
.categories .category__link {
  position: relative;
  color: #0b1320;
  font-size: 24px;
  opacity: 0.6;
  padding: 0 34px 14px 34px;
  transition: none;
  /* 移除Bootstrap默认标签链接的边框样式 */
  border: none !important;
  border-radius: 0 !important;
}
.categories .category__link.active {
  background: transparent;
  color: #000;
  opacity: 1;
  font-weight: bold;
}
/* 伪元素实现带圆角的红色下边框 */
.categories .category__link.active::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  /* 宽度和文字区域对齐，也可以自定义固定宽度 */
  width: calc(100% - 68px);
  height: 5px;
  background-color: red;
  /* 设置圆角效果 */
  border-radius: 999px;
}