Eugenio Eugenio - 3 months ago 14
CSS Question

Create Unordered List with bullet as ornament while hovering

I would like to create an unordered list that could display a bullet under each link like this image attached

Image1

Could someone recommend me something to achieve this?

Answer

You can remove default bullets from ul with list-style: none and then create custom bullets with :after pseudo element.

ul {
  list-style: none;
  display: flex;
  justify-content: space-around;
  padding: 0;
}
li {
  position: relative;
  font-family: sans-serif;
  transition: all 0.3s ease-in;
  font-weight: bold;
}
li:after {
  content: '';
  width: 7px;
  height: 7px;
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  background: black;
  border-radius: 50%;
  opacity: 0;
  transition: all 0.3s ease-in;
}
li:hover:after {
  opacity: 1;
  background: #682E73;
}
li:hover {
  color: #682E73;
}
<ul>
  <li>LOREM</li>
  <li>LOREM</li>
  <li>LOREM</li>
  <li>LOREM</li>
</ul>