So, I made a few changes to your code that should solve your problem:
- Increase the distance from the bullet from above
- Centering through
left: 50% and translateX(-50%) - Setting the bullet to the absolute position, and the parent
li to the relative position, otherwise your link will move slightly to the right whenever you hover over it (and also centering will be a little more difficult).
Below you can see the fragment 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 a marker after the list item, you should use the after pseudo-element instead (thanks to @ErickPetrucelli).
If you want, you can put it using right (instead of left ) and translateX , or if you don't want to do this, you can use the following approach instead:
.top-menu-left ul li a:hover:after { [...] display: block; width: 100%; text-align: center; }
There is only one slight difference between both methods: when positioning through left: 0 or right: 0 and translateX(-50%) will occupy only the necessary space for the bullet (left image), centering it with display: block and text-align: center stretches the area to the full block (right image).
Output:
Given that you're probably only going to display the aforementioned brand, it doesn't matter which method you use.
But let's say that you would like to display the text below, instead the display: block method will probably serve you better, because it allows you to text beautifully (the right image), where, as in the previous method, the text will not centered and will overflow (left image).