Как задать по центру в CSS элемент li:hover?

Question

[Кирилл]

Прикрутил к элементу li: hover картинку чтоб при наведение на пункт навигации над ним отображалась стрелочка так вот как ее можно центровать в CSS чтоб она была по середине текста? прошу помощи! Подробнее в песочнице

Answer 1

[Кирилл]

Все спасибо разобрался сам вопрос закрываю! нужно было li: hover заменить на класс a:hover спасибо что откликнулись )

Answer 2

[Вадим Белкин]

background-position: 50%;
или
background-position: center;

То что собственно у вас сейчас, выравнивает фоновую картинку по центру (по вертикали и горизонтали).
В примере к сожалению фоновое изображение не работает.

Comments

[Кирилл]

О чем вы говорите? я говорю конкретно о элементе который появляется над текстом когда наводишь мышь на пункт меню, а не о заливке самого блока.

[Вадим Белкин]

Что-то типа этого? jsfiddle.net/f5xje1ax/1

[Кирилл]

если точнее чтоб было наглядно понятно

[Кирилл]

нужно просто сдвинуть зеленую стрелку которая привязана к li: hover немного в право, но если использовать margin то двигается и текст

[Вадим Белкин]

Через псевдоэлемент :before или :after. Стилизуете его как вам нужно. И через position: absolute выравниваете его. Если у него будут задана конкретная ширина, то по горизонтали по центру можно выровнить так left: 0; right: 0; margin: 0 auto;

[Кирилл]

Вадим Белкин: нет нет все проще нужно li: hover заменить на класс a:hover спасибо что откликнулись )