Search code examples
htmlcsscss-shapes

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

I'm creating a menu, and I want to achieve this look when you hover a menu item:

enter image description here

As you can see, when you hover a menu item (a hovered li a) this light blue shape appears.

Is there a way to achieve this using Pseudo elements like li a:hover:after or border-bottom without having to use tricky "hidden image" techniques?

Solution

  • You could use :after pseudo-element for border and border-radius to create that shape of border.

    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>

    You can also use radial-gradient where you can get more control over how the border will look like.

    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>