<ul>
  <li>
    <a href="#">home</a>
  </li>
  <li>
    <a href="#">product</a>
  </li>
  <li>
    <a href="#">resume</a>
  </li>
  <li>
    <a href="#">adress</a>
  </li>
  <li>
    <a href="#">about</a>
  </li>
</ul>

* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}

ul {
  display: flex;
  align-items: center;
}

ul li {
  margin-left: 30px;
  width: 100%;
  text-align: center;
  position: relative;
  margin-top: 10px;
}

ul li svg {
  display: block;
  fill: blue;
  opacity: 0;
  transition: 0.34s linear;
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  height: 10px;
}

ul li:hover svg {
  opacity: 1;
}

ul li a {
  margin-top: 10px;
}

let svg = `<svg viewBox="0 0 150 20">
  <path d="M0,0 150,0 130,20 20,20z" />
</svg>`;

document.querySelectorAll("ul li").forEach(function (list) {
  list.insertAdjacentHTML("afterBegin", svg);
});