Добавление подчеркивания на панель навигации с помощью CSS

Question

Я бы хотел, чтобы получилось так: левая и правая желтые линии разделены на ширину контейнера

Я ошибаюсь Я сейчас

Это мой css и html что у меня

nav>a:nth-child(1) {
  width: 88px;
  color: #000000b8;
  font-size: 17px;
  font-weight: bold;
  padding: 0px 18px;
  text-decoration: none;
  pointer-events: initial;
  line-height: 25px;
  position: relative;
  display: inline-block;
}

nav>a:nth-child(2) {
  width: 88px;
  color: #000000b8;
  font-size: 17px;
  font-weight: bold;
  padding: 0px 18px;
  text-decoration: none;
  pointer-events: initial;
  line-height: 25px;
  position: relative;
  display: inline-block;
}

nav>a:nth-child(1):after {
  content: '';
  width: 100%;
  height: 3px;
  position: absolute;
  left: -16px;
  bottom: -12px;
  margin-left: 0px;
  background-color: #ffc107;
  display: block;
}

<nav class="navbar navbar-fixed-top">
  <a href="/popular" class="mapxr">Popular</a>
  <a href="/ect" class="mapxr">ect</a>
</nav>

Answer 1

Да, вам нужно сделать контейнер navbar с display: flex; и добавить ширину 50% к дочерним div. См. Здесь:

Также я добавил text-align:center; каждому дочернему элементу, чтобы он был центрирован.

nav > a:nth-child(1){
width: 88px;
color: #000000b8;
font-size: 17px;
font-weight: bold;
padding: 0px 18px;
text-decoration: none;
pointer-events: initial;
line-height: 25px;
position: relative;
display: inline-block;
width: 50%;
text-align: center;
}


nav > a:nth-child(2){
width: 88px;
color: #000000b8;
font-size: 17px;
font-weight: bold;
padding: 0px 18px;
text-decoration: none;
pointer-events: initial;
line-height: 25px;
position: relative;
display: inline-block;
width: 50%;
text-align: center;
}


nav > a:nth-child(1):after{
content: '';
width: 100%;
height: 3px;
position: absolute;
left: -16px;
bottom: -12px;
margin-left: 0px;
background-color: #ffc107;
display: block;
}

.navbar {
  display: flex;
  position: relative;
}

<nav class="navbar navbar-fixed-top">
<a href="/popular" class="mapxr">Popular</a>
<a href="/ect" class="mapxr">ect</a>
</nav>

Answer 2

Правильно?

<style>
nav > a:nth-child(n){
width:88px;
color: #000000b8;
font-size: 17px;
font-weight: bold;
text-decoration: none;
pointer-events: initial;
line-height: 25px;
position: relative;
display: inline-block;
}

a{
  text-align:center;
}

nav > a:nth-child(1):after{
content: '';
width: 100%;
height: 3px;
position: absolute;
background-color: #ffc107;
display: block;
}

</style>

<nav class="navbar navbar-fixed-top">
<a href="/popular" onclick='return false' class="mapxr">Popular</a>
<a href="/ect" onclick='return false' class="mapxr">ect</a>
</nav>