Putting a dot underneath a navbar link CSS

Question

I am trying to put a single dot under my active link in the navbar as showin in picture: Required design

So far I have tried this:

.active-page {
  border-bottom: 8px solid #8edafa;
  border-radius: 5px;
  color: #8edafa;
  padding-bottom: 13px;
}

This gets me the following result: enter image description here

How do I get that dot as shown in the first image?

Answer 1

A border wouldn't help you in that case.

You can use a pseudo element instead. You have to use position: absolute; for the dot (.active-page::after), and position: relative; for the parent (.active-page)

Like:

.active-page {
  position: relative;
  // ...
}

.active-page::after {
  position: absolute;
  top: 40px;
  // ...
}