怎样才能实现这种设计，当列表项"；Li"；是否处于活动状态？

顺晟科技：

<div class="items">
      <div class="active">
        <img src="img/icon" alt="" />
      </div>
      <span class="nav">Dashboard</span>
    </div>

<代码><；Li CLASS=“ list-item ”>；<；DIV Class=“ list-selection ”>；<；span Class=“ icon ”>；icon<；/span>；<；/DIV&>；<；SPAN CLASS=“ TXT ”>；仪表板<；/SPAN>；<；/Li>；

HTML：

img {
  height: 50px;
  width: 50px;
}
.items {
  display: flex;
  align-items: center;
}
.active {
  background: #f5eae3;
  padding: 1rem 1.5rem 1rem 6rem;
  border-radius: 0 100px 100px 0;
}
.nav {
  margin: 0 0 0 1.5rem;
  color: #ff8078;
}

<代码><；DIV类=“项”>；<；DIV类=“活动”>；<；IMG SRC=“ IMG/icon ” alt=“ ”/>；<；/DIV>；<；SPAN CLASS=“ NAV ”>；仪表板<；/SPAN>；<；/DIV>；