在我將* *活動* *類添加到標記之前，* * after * *樣式有效，并將該行放在文本下面，但是在我將活動類添加到標記之后，* * after * *不再有效。我哪里做錯了？ 我用React js和scss(module.scss)

沒有活動類，::后作品和顯示行

對于活動類，::after不起作用

<Row>
  <Col>
    <div className={`${styles.lgtTab}`}>
      <div className={`${styles.tabNav}`}>
        <div className={`d-inline-block me-4 py-2 active ${styles.tabHeaderItem}`}>
          <i className="bi bi-list-check me-2"></i>
          <a href="#productFeatures">Product Features</a>
        </div>
        <div className={`d-inline-block me-4 py-2 ${styles.tabHeaderItem}`}>
          <i className="bi bi-justify-left me-2"></i>
          <a href="#moreDetails">More Details</a>
        </div>
        <div className={`d-inline-block me-4 py-2 ${styles.tabHeaderItem}`}>
          <i className="bi bi-question-square me-2"></i>
          <a href="#askFromSeller">Ask From the Seller</a>
        </div>
      </div>
      <div className={`py-4 pe-4`}>
        <div id="productFeatures" className={`${styles.tabContent}`}>
          <h3>Product Features</h3>
          <Table striped bordered className={`mx-4 ${styles.lgtTable}`}>
            <tbody>
              <tr>
                <td>something</td>
                <td>something else</td>
              </tr>
              <tr>
                <td>something</td>
                <td>something else</td>
              </tr>
              <tr>
                <td>something</td>
                <td>something else</td>
              </tr>
              <tr>
                <td>something</td>
                <td>something else</td>
              </tr>
            </tbody>
          </Table>
        </div>
        <div id="moreDetails" className={`${styles.tabContent}`}>
          <h3>More Details</h3>
          <p className={`mx-4`}>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt eum ipsam quod nostrum repudiandae,
            a fugit reprehenderit necessitatibus eos.
            Similique eaque odio quasi cumque rerum doloribus eius, fugiat enim quibusdam?
          </p>
        </div>
        <div id="askFromSeller" className={`${styles.tabContent}`}>
          <h3>Ask From the Seller</h3>
          <span className={`mx-4`}>
            Log in to your account to ask the seller of this product. <a href="#" className={`text-decoration-none ${styles.lgtLoginLink}`}>Login / Register</a>
          </span>
        </div>
      </div>
    </div>
  </Col>
</Row>

scss樣式:

.tabNav{
    border-bottom: 1px solid #efefef;
    .tabHeaderItem{
        font-size: 18px;
        font-weight: 500;
        position: relative;
            a{
                text-decoration: none;
                color: var(--bs-gray-600);
            }
        &.active{
            &::after{
                content: "";
                position: absolute;
                top: 41px;
                left: 0;
                width: 100%;
                height: 5px;
                border-radius: 100px 100px 0 0;
                background-color: $primary;
                -webkit-transition: height .3s,opacity .15s;
                -o-transition: height .3s,opacity .15s;
                transition: height .3s,opacity .15s;
                bottom: 0px;
                right: 0px;
            }
            a{
                color: var(--bs-body-color);
            }
        }
        i{
            font-size: 20px;
        }
    }
}

針對你提出的觀點，我更新了我的回答。

您可以做的一件事是利用:not選擇器。

您可以在代碼片段(以及下面的SCSS代碼)中看到，我只為a元素添加了::after樣式:不在. tabHeaderItem.active中

.tabNav {
  border-bottom: 1px solid #efefef;
}
.tabNav .tabHeaderItem {
  font-size: 18px;
  font-weight: 500;
  position: relative;
}
.tabNav .tabHeaderItem a {
  text-decoration: none;
  color: gray;
  // color: var(--bs-gray-600);
}
.tabNav .tabHeaderItem:not(.active) a::after {
  content: "";
  position: absolute;
  top: 41px;
  left: 0;
  width: 100%;
  height: 5px;
  border-radius: 100px 100px 0 0;
  background-color: red;
  // background-color: $primary;
  -webkit-transition: height 0.3s, opacity 0.15s;
  -o-transition: height 0.3s, opacity 0.15s;
  transition: height 0.3s, opacity 0.15s;
  bottom: 0px;
  right: 0px;
}
.tabNav .tabHeaderItem.active a {
  // color: var(--bs-body-color);
  color: black;
}
.tabNav .tabHeaderItem i {
  font-size: 20px;
}

<link  rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">


<Row>
  <Col>
    <div class="lgtTab">
      <div class="tabNav">
        <div class="d-inline-block me-4 py-2 active tabHeaderItem">
          <i class="bi bi-list-check me-2"></i>
          <a href="#productFeatures">Product Features</a>
        </div>
        <div class="d-inline-block me-4 py-2 tabHeaderItem">
          <i class="bi bi-justify-left me-2"></i>
          <a href="#moreDetails">More Details</a>
        </div>
        <div class="d-inline-block me-4 py-2 tabHeaderItem"}>
          <i class="bi bi-question-square me-2"></i>
          <a href="#askFromSeller">Ask From the Seller</a>
        </div>
      </div>
      <div class="py-4 pe-4">
        <div id="productFeatures" class="tabContent">
          <h3>Product Features</h3>
          <Table striped bordered class="mx-4 lgtTable">
            <tbody>
              <tr>
                <td>something</td>
                <td>something else</td>
              </tr>
              <tr>
                <td>something</td>
                <td>something else</td>
              </tr>
              <tr>
                <td>something</td>
                <td>something else</td>
              </tr>
              <tr>
                <td>something</td>
                <td>something else</td>
              </tr>
            </tbody>
          </Table>
        </div>
        <div id="moreDetails" className="tabContent">
          <h3>More Details</h3>
          <p className="mx-4">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt eum ipsam quod nostrum repudiandae,
            a fugit reprehenderit necessitatibus eos.
            Similique eaque odio quasi cumque rerum doloribus eius, fugiat enim quibusdam?
          </p>
        </div>
        <div id="askFromSeller" className="tabContent"}>
          <h3>Ask From the Seller</h3>
          <span className={`mx-4`}>
            Log in to your account to ask the seller of this product. <a href="#" className="text-decoration-none lgtLoginLink">Login / Register</a>
          </span>
        </div>
      </div>
    </div>
  </Col>
</Row>