React中如何让选中标签的下划线显示在水平线上方？

要实现选中标签的下划线在水平线上方的效果，你可以通过调整布局结构和CSS样式来解决，核心思路是把底部水平线和标签栏整合到同一个容器中，避免单独的hr被标签的内边距挤下移。

方法一：使用伪元素实现下划线 #

修改后的JSX结构（无需单独hr）：

<div className='chart-area-tabs'>
    <p className="currentTab">Sales (0$)</p>
    <p>Order Volume (0)</p>
    <p>Ticket Size ($0.00)</p>
</div>

对应的CSS代码：

/* 标签容器横向排列，底部设置水平线 */
.chart-area-tabs {
    display: flex;
    gap: 24px; /* 可根据需求调整标签间距 */
    border-bottom: 1px solid #000;
    align-items: flex-end;
}

/* 统一标签的基础样式 */
.chart-area-tabs p {
    margin: 0;
    padding: 0 0 8px; /* 控制下划线与文本的距离 */
    position: relative;
}

/* 选中标签的样式 */
.chart-area-tabs .currentTab {
    font-weight: 600;
}

/* 用伪元素生成选中标签的下划线，刚好覆盖容器底部水平线的位置 */
.chart-area-tabs .currentTab::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background-color: #000;
}

方法二：利用边框覆盖实现 #

同样使用整合后的JSX结构，CSS改为：

.chart-area-tabs {
    display: flex;
    gap: 24px;
    border-bottom: 1px solid #000;
}

.chart-area-tabs p {
    margin: 0 0 -1px; /* 让标签底部对齐容器的水平线顶部 */
    padding: 0 0 8px;
    border-bottom: 1px solid transparent; /* 占位避免切换标签时布局跳动 */
}

.chart-area-tabs .currentTab {
    font-weight: 600;
    border-bottom-color: #000; /* 选中时显示下划线，覆盖容器的水平线 */
}

原理说明 #

原来的方案中，给选中标签添加padding-bottom和border-bottom会增加标签的高度，导致整个标签容器被撑高，进而让下方的hr被迫下移。现在的方法把水平线作为标签容器的底部边框，通过伪元素或边框覆盖的方式，让选中标签的下划线刚好位于容器边框的上方，既保证了视觉效果，又不会破坏整体布局。

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