Как выровнять данный элемент, чтобы он всегда был по центру при :hover?

Question

[Фёдор]

Приветствую! Возник такой момент, не могу понять, как выровнять элемент. В данном случае, вот эту точку при наведении в навигации:



Пробовал варианты через margin / padding сместить. Но ни каких результатов это не дало. Задав фиксированный

left: 400px

получил нужный результат только для первой ссылки. Для других точка всегда остаётся в одно положении и меняется только цвет, что вполне логично.

.position-header_nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 20px;
    position: relative;
}

nav a{
    margin-left: 30px;
    font: 400 1.12em 'Gelion', sans-serif;
    color: black;
}

nav a:hover {
    cursor: pointer;
    color: #FB4C47;
}

nav a:hover::after {
    content: "\2022";
    position: absolute;
    left: auto;
    bottom: 2px;
}

Answer 1

[Роман]

Чтобы позиционировать элемент, относительно родителя, ему нужно изменить контекст.
Для этого нужно, родителю, задать тип позиционирования отличный от static.

В данном случае, добавьте в код:

nav a {
  position: relative;
}
nav a:hover::after {
  left: 50%;
  tranform: translateX(-50%);
}

Comments

[Фёдор]

Спасибо большое. Это именно то, что мне нужно.

P.S: Мог бы и сам догадаться, что не тому классу задал position: relative хD

Answer 2

[Евгений]

nav a:hover::after {
    content: "\2022";
    position: absolute;
    left: 50%;
    bottom: 2px;
    transform: translateX(-50%)
}

Comments

[Фёдор]

Это не много не то. Одну точку я и сам сделал, а мне надо, чтобы при наведении на каждую ссылку была такая точка.

[Евгений]

Фёдор, если надо, чтобы она ездила, то воспользуйтесь скриптами