如何将此形状作为菜单项的边框？

我正在创建一个菜单,当你将一个菜单项悬停时,我希望实现这一目标:

如您所见,当您将一个菜单项(悬停li a)悬停时,会出现这个浅蓝色的形状.

有没有办法使用Pseudo元素来实现这一点,li a:hover:after无论border-bottom是否需要使用棘手的"隐藏图像"技术？

您可以将:after伪元素用于边框并border-radius创建该边框形状.

ul {
  display: flex;
  list-style-type: none;
  flex-direction: column;
  align-items: center;
  padding: 0;
}
li {
  margin: 10px 0;
  position: relative;
  cursor: pointer;
}
li:after {
  content: '';
  width: 130%;
  height: 3px;
  border-radius: 50%;
  position: absolute;
  transform: translateX(-15%);
  background: #5F8AAA;
  left: 0;
  bottom: -5px;
  opacity: 0;
  transition: opacity 0.3s linear;
}
li:hover:after {
  opacity: 1;
}

  
Lorem ipsum
  
Lorem ipsum
  
Lorem ipsum