I want to change the Underline for a Dot, a single dot using CSS HTML

enter image description here

I want to change the Underline for a Dot, a single Dot, that is, when the cursor is over "Home" a Dot appears and so for each Option such as "Movies" "Music" .. etc Please #CSS #HTML

If I understand the question correctly, this is your starting point:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

a {
  display: inline-block;
  position: relative;
  padding-bottom: 8px;
  text-decoration: none;
  color: inherit;
}

a:hover:after {
  transition-delay: .2s;
}

a:hover:before {
  transition-delay: 0s;
}

a:hover:before {
  transform: scaleX(0);
}

a:hover:after {
  transform: scale(1);
}

a:before,
a:after {
  content: '';
  position: absolute;
  background-color: currentColor;
}

a:before {
  inset: auto 0 3px;
  height: 1px;
  transition: transform .2s .2s;
}

a:after {
  width: 6px;
  height: 6px;
  inset: auto calc(50% - 3px) 0;
  transition: transform .2s;
  transform: scale(0);
  border-radius: 50%;
}

<!-- language: lang-html -->

<a href="#">Movies</a>

<!-- end snippet -->