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

Question

我正在创建一个标签，点击它我想给底部一些颜色

最初我创建了一条线 (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

我认为我遗漏了一小部分，我正在做的只是一个hack-around，我想以正确的方式去做。

Answer 1

Sandbox

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

如果您想要更宽的下划线，请在选项卡上添加一些填充。