How to center align a pseudoElement under bootstrap nav link?

Question

Hello i want to center the line that is under my menu i created the line using a pseudo element.

This is the 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>

This is what I have

I want to center the line like this

knowing that the active class depends on which element i click : Selection de variable or Analyse or Benchmark de models or RESULTATS

I am using Bootstrap

Carol Skelly · Answer 1 · 2020-11-25T21:22:26.487

Use auto left and right margins to center the element...

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>

That could change if the version of bootstrap changed – mplungjan Nov 25 '20 at 18:30 — mplungjan, Nov 25 '20 at 18:30

score -1 · Answer 2 · answered Nov 25 '20 at 20:20

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

}

.nav-link.active::after {
    content: '';
    display: block;
    width: 22px;
    height: 2px;
    background: #482683;
    margin-top: 27px;
    position: absolute;
    left:50%;
    transform: translate(-50%, -50%);

}

<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>

How to center align a pseudoElement under bootstrap nav link?

2 Answers2