如何将边框底部赋予活动选项卡

问题描述

我正在创建一个标签，点击后我想为底部添加颜色

最初我创建了一行（div），并为其添加了一些CSS，以便它出现在底部， 现在，当我单击一个特定的选项卡时，我正在更改文本的颜色，但是我也想提供一些底部边框。

为此，我仅使用以下CSS

.active {
  position: absolute;
  margin-top: 1.5rem;
  height: 4px;
  width: 9%;
  background-color: red;
}

但是在这里我必须修复导致问题的原因，我希望它占据文本的整个宽度。

我的代码

{
  common_data.map((li,index) => ( <
    div key = {
      index
    }
    className = "d-flex menu_group"
    onClick = {
      () => menu_click(index)
    }
    onMouseEnter = {
      () => mouse_enter(index)
    }
    onMouseLeave = {
      mouse_leave
    } >
    <
    i className = {
      index === menu_state ?
      li.icon + '-fill icon_menu_fill' :
        index === idi ?
        li.icon + '-line icon_menu_line onHover' :
        li.icon + '-line icon_menu_line'
    } > < /i> <
    div className = {
      index === menu_state ?
      'name_active' :
        index === idi ?
        'onHover name_not_active' :
        'name_not_active'
    } > {
      li.menu
    } <
    /div> <
    div className = {
      index === menu_state ? 'active d-flex flex-column' : ''
    } > < /div> <
    /div>
  ))
}

Code sandbox link

我认为我缺少一小部分，我的工作方式只是破解，我想以适当的方式做到这一点。

解决方法

Sandbox

在position: relative;上添加了.menu_group，在width: 100%;上添加了.active

如果要加宽下划线，请在标签上添加一些填充。