JSFiddle - React, Tailwind, and code Playground

HTML

<nav class="nav1">
  <a href="">text</a>
  <a href="">texttext</a>
</nav>
<nav class="nav2">
  <a href="">text</a>
  <a href="">texttext</a>
</nav>

CSS

* {
  box-sizing: border-box
}

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}

.nav1 a {
  position: relative;
  display: inline-block;
  margin: 20px;
  text-decoration: none;
}

.nav1 a::before {
  content: "";
  position: absolute;
  top: 100%;
  display: block;
  width: 100%;
  height: 3px;
  background: linear-gradient(to right, violet calc(50% - 1px), transparent calc(50% - 1px), transparent calc(50% + 1px), violet calc(50% + 1px));
}

.nav2 a {
  display: inline-block;
  margin: 20px;
  padding-bottom: 3px;
  text-decoration: none;
  background: linear-gradient(to right, violet calc(50% - 1px), transparent calc(50% - 1px), transparent calc(50% + 1px), violet calc(50% + 1px)) no-repeat bottom center / 100% 3px;
}