Mecitan
@Mecitan
Начинающий web-разработчик

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

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

600582e869667330182376.jpeg

Пробовал варианты через 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;
}
  • Вопрос задан
  • 73 просмотра
Решения вопроса 1
RomanTRS
@RomanTRS
Чтобы позиционировать элемент, относительно родителя, ему нужно изменить контекст.
Для этого нужно, родителю, задать тип позиционирования отличный от static.

В данном случае, добавьте в код:
nav a {
  position: relative;
}
nav a:hover::after {
  left: 50%;
  tranform: translateX(-50%);
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
iamd503
@iamd503 Куратор тега CSS
Верстальщик
nav a:hover::after {
    content: "\2022";
    position: absolute;
    left: 50%;
    bottom: 2px;
    transform: translateX(-50%)
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы