Bullet under the list item

Question

As you can see in the picture there is a bullet infront of the list item "Fashion", this is shown only on the hover state. My goal is to place the bullet under the list item.

This is my CSS for now:

.top-menu-left ul li a:hover:before
{
  content: "\2022";
  color: inherit;
  padding-right: 4px;
  position: relative;
  top: 1px;
}

Can someone help me with that?

Answer 1

So, I made a few changes to your code which should solve your problem:

• Increasing the distance of the bullet from the top
• Centering it via left: 50% and translateX(-50%)
• Setting the bullet to be position absolute and it's parent li to position relative, or else your link would shift slightly to the right whenever you would hover over it (and also centering it would be slightly more difficult)

You can look at the snippet below to see the final result:

.top-menu-left ul {
  list-style: none;
}

.top-menu-left ul li {
  display: inline-block;
  position: relative;
}

.top-menu-left ul li + li {
  margin-left: 25px;
}

.top-menu-left ul li a:hover:before {
  content: "\2022";
  position: absolute;
  top: 1em;
  left: 50%;
  translate: translateX(-50%);
}

<div class="top-menu-left">
  <ul>
    <li><a>FASHION</a></li>
    <li><a>TRAVEL</a></li>
  </ul>
</div>

---

Edit:

Since you are trying to place the bullet after the list item, you should instead be using the after pseudo-element (thanks to @ErickPetrucelli).

If you want, you can still position it via right (instead of left) and translateX, or if you don't want to do that, you could instead go for the following approach:

.top-menu-left ul li a:hover:after {
  [...]
  display: block;
  width: 100%;
  text-align: center;
}

There is just one minor difference between both techniques: while positioning it via left: 0 or right: 0 and translateX(-50%) will only take up the required space for the bullet (left picture), centering it via display: block and text-align: center stretches the area to a full block (right picture).

---

Conclusion:

Considering you are probably only going to display the aforementioned bullet, it doesn't matter which method you use.
But lets say you wanted to display some text bellow the link instead, then the display: block method is probably going to serve you better because it allows the text to wrap nicely (right picture) where as with the former method, the text wouldn't be centered and would overflow (left picture).

Answer 2

I suggest just generate the bullet :after the anchor contents (and not :before), letting display: block and text-align: center solve the problem for you. I also removed ul li to make more clear and to better demonstrate that the solution is with the a itself.

.top-menu-left {
  display: flex;
}
.top-menu-left a {
  color: #111;
  padding: 0 10px;
  text-decoration: none;
  text-transform: uppercase;
  text-align: center;
}
.top-menu-left a:hover {
  color: #666;
}
.top-menu-left a:hover:after {
  content: '\2022';
  color: inherit;
  display: block;
  position: relative;
  top: -4px;
}

<nav class="top-menu-left">
  <a href="#fashion">Fashion</a>
  <a href="#travel">Travel</a>
</nav>

Of couse, if you really like to structure your HTML with the list item:

.top-menu-left ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}
.top-menu-left a {
  display: block;
  color: #111;
  padding: 0 10px;
  text-decoration: none;
  text-transform: uppercase;
  text-align: center;
}
.top-menu-left a:hover {
  color: #666;
}
.top-menu-left a:hover:after {
  content: '\2022';
  color: inherit;
  display: block;
  position: relative;
  top: -4px;
}

<nav class="top-menu-left">
  <ul>
    <li><a href="#fashion">Fashion</a></li>
    <li><a href="#travel">Travel</a></li>
  </ul>
</nav>