html - 如何在引导导航链接下居中对齐伪元素？

Question

您好，我想将菜单下的行居中，我使用伪元素创建了该行。

这是html：

.nav-link.active {
  color: #482683;
  font-size: 14px;
}

.nav-link.active::after {
  content: '';
  display: block;
  width: 22px;
  height: 2px;
  background: #482683;
  margin-top: 27px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"/>

<ul class="nav aa" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">SELECTION DE VARIABLE</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">ANALYSE</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">BENCHMARK DES MODELS</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="resultats-tab" data-toggle="tab" href="#resultats" role="tab" aria-controls="resultats" aria-selected="false">RESULTATS</a>
  </li>
</ul>

这就是我所拥有的

我想像这样将线居中

知道活动类取决于我单击的元素：选择变量或分析或基准模型或结果

我正在使用引导程序

标签： htmlcssbootstrap-4css-selectorspseudo-element

Answer 1

使用auto左右边距使元素居中...

https://codeply.com/p/zskLZaqG7t

.nav-link.active {
    color: #482683;
    font-size: 14px;

}

.nav-link.active::after {
    content: '';
    display: block;
    width: 22px;
    height: 2px;
    background: #482683;
    margin-top: 27px;
    margin-left: auto;
    margin-right: auto;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

<ul class="nav aa" id="myTab" role="tablist">
    <li class="nav-item">
        <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">SELECTION DE VARIABLE</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">ANALYSE</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">BENCHMARK DES MODELS</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="resultats-tab" data-toggle="tab" href="#resultats" role="tab" aria-controls="resultats" aria-selected="false">RESULTATS</a>
    </li>
</ul>