Eugenio Eugenio - 1 year ago 109
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


Could someone recommend me something to achieve this?

Answer Source

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;

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download