cдвинуть псевдоэлемент :after вниз

[Нusuf]

здравствуйте.

у меня после названия меню при наведении курсора должна появляться стрелочка:

но, как видно из рисунка, она сдвигает текст вниз.

Как сделать , чтобы сам текст оставался на месте, а стрелка располагалась по центру линии текста (т.е. напротив него,а не кверху)?ю

вот код строки меню до наведения курсора:

.moduletable .menu li {

float: left;

margin-left: 45px;

font-size: 15px;

font-family:'GeosansLightRegular',Arial,Helvetica,sans-serif !important;

font-weight: normal !important;

padding-bottom: 4px;

padding-left: -10px;

}

это код для ссылки на эту строку:

.moduletable .menu li a:hover{

/*list-style-type: none;*/ /* Прячем исходные маркеры */

background: url("../images/menu_line3.png") no-repeat left bottom;

padding-left: -10px;

padding-bottom: 4px;

text-decoration: none;

}

вот код для ввода псевдоэлемента при наведении курсара:

.moduletable .menu li:hover::after {

list-style-type: none; /* Прячем исходные маркеры */

content: url(../images/menu_arrow2.png); /* Маркер после назв.меню */

}

что нужно сюда добавить, чтобы выровнять эту стрелку и текст, чтобы он не съезжал?

спасибо

[Sensei]

Например так:

li {
	position: relative;
}

li:after {
	position: absolute;
	top:  0;    left: 0;
	bottom: 0;  right: 0;
}

Подставите нужные значения.

[Нusuf]

Например так:

li {
	position: relative;
}

li:after {
	position: absolute;
	top:  0;    left: 0;
	bottom: 0;  right: 0;
}

Подставите нужные значения.

Дааааа!

Sensei, спасибо огромное!

[Нusuf]

Sensei, вы не могли бы коротко пояснить , в чём мудрость того, что для (li) вы назначили (relative), а для (li:after) вы назначили (absolute) ?

я уже давно бьюсь над пониманием этих двух значений позиционирования и никак не могу до конца постичь.

не могли бы вы пояснить это на приведённом примере ?

спасибо

[lexxcode]

Могу я объяснить, с вашего позволения.

Суть в том, что псевдо-элементы :before и :after они вставляются непосредственно перед и после контента, соответственно. То бишь выходит нечто подобное с :after, например:

<li>content<:after/></li>

Тем самым указав, li position:relative; , а :after position:absolute;, то псевдо-элемент начинает позиционироваться относительно своего родителя, то есть li

[Нusuf]

спасибо огромное за объяснение, alexriz

немного прояснилось