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

Question

我正在创建一个菜单，我想在您将鼠标悬停在菜单项上时实现这种外观：

如您所见，当您悬停菜单项时（悬停 li a），会出现这个浅蓝色形状。

有没有一种方法可以使用像 li a:hover:after 或 border-bottom 这样的伪元素来实现这一点，而不必使用棘手的 "hidden image" 技术？

Answer 1

试试这个

.divclass

    text-decoration: none;
    border-bottom: 3px solid white;
}
.topmenu a:hover{
    border-bottom-color: blue;
}

它不那么花哨，但它是一个开始

fiddle : https://jsfiddle.net/anqweymd/

Answer 2

您可以使用 :after pseudo-element 作为边框，并使用 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;
}

<ul>
  <li>Lorem ipsum</li>
  <li>Lorem ipsum</li>
  <li>Lorem ipsum</li>
</ul>

您也可以使用 radial-gradient 来更好地控制边框的外观。

ul {
  display: flex;
  flex-direction: column;
  list-style-type: none;
  align-items: center;
  padding: 0;
}
li {
  margin: 10px 0;
  position: relative;
  cursor: pointer;
}
li:after {
  content: '';
  width: 130%;
  height: 3px;
  position: absolute;
  transform: translateX(-15%);
  background: radial-gradient(ellipse at center, rgba(111,182,232,1) 0%, rgba(111,182,232,1) 40%, rgba(211,229,242,1) 70%, rgba(255,255,255,0) 80%, rgba(255,255,255,0) 100%);
  left: 0;
  bottom: -5px;
  opacity: 0;
  transition: opacity 0.3s linear;
}
li:hover:after {
  opacity: 1;
}

<ul>
  <li>Lorem ipsum</li>
  <li>Lorem ipsum</li>
  <li>Lorem ipsum</li>
</ul>

Answer 3

您可以将图片添加为li的背景，您只需要找到合适的位置即可。

ul li ul li:hover {background-image: url("images/yourShapeImage.png");}

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

How to get this shape as border on a menu item?

html

css

css-shapes