CSS 仅在事件文本上加下划线而不是填充 - ajax 工具包选项卡

Question

我正在尝试设置一些 ajax 工具包选项卡的样式，但遇到了一个奇怪的问题。

我希望所选选项卡带有下划线(底部边框为红色)，但只有选项卡内的文本带有下划线。当前，所选选项卡带有下划线并且包括选项卡的填充。我尝试了很多使用 margin、padding 和 box-sizing 的变体，但没有成功。谁能帮忙？

这是我的CSS

.InnerTabStyle .ajax__tab_header
{
    box-sizing: content-box;
    display: inline-block;
    padding: 1em 0.5em;
    cursor: pointer;
}
.InnerTabStyle .ajax__tab_header .ajax__tab_outer
{
    border-left-color:#fff;
    border-right-color:#fff;
    border-top-color:#fff;
}
 
.InnerTabStyle .ajax__tab_header .ajax__tab_inner
{
    border-left-color:#fff;
    border-right-color:#fff;
    border-top-color:#fff;
}
 
.InnerTabStyle .ajax__tab_hover .ajax__tab_outer
{
}
 
.InnerTabStyle .ajax__tab_hover .ajax__tab_inner
{
    border-bottom: 2px solid #e3002b; 
}
 
.InnerTabStyle .ajax__tab_outer
{
    box-sizing: content-box;
    background: #fff;
    position: relative;
    z-index: 4;
    top: 1px;
    padding-right: 2em;
}
 
.InnerTabStyle .ajax__tab_inner
{
    border-left-color:#fff;
    border-right-color:#fff;
    border-top-color:#fff;
}
 
.InnerTabStyle .ajax__tab_tab
{
    color: #e3002b;
}
 
.InnerTabStyle .ajax__tab_active
{
    border-bottom: 2px solid #e3002b;
}
 
 
 
 
.InnerTabStyle .ajax__tab_body
{
    display: inline-block;
    padding: 1em 0.5em;
    cursor: pointer;
    color: #000;
    font-size: 16px;
    font-size: 1.6rem;
}

Answer 1

你需要改变

.InnerTabStyle .ajax__tab_hover .ajax__tab_inner
{
    border-bottom: 2px solid #e3002b; 
}

到

.InnerTabStyle .ajax__tab_active
{
    text-decoration: underline; 
    text-decoration-color: red;
}

假设文本在 .ajax__tab_inner 中