[CSS] Podkreślenie opcji w menu, tylko do połowy Opcje

[lukash82]

Witam,

Potrzebuję uzyskać efekt podkreślenia wybranej opcji w menu nawigacyjnym strony. Mam coś takiego (pracuję na BS 3.3).

[CSS] pobierz, plaintext 
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
	  border-bottom: 3px solid #9e1e22;
}
[CSS] pobierz, plaintext 

Podgląd tu

W ten sposób jednak podkreślenie widoczne jest pod całą nazwą. Grafik wymyślił sobie podkreślenie tylko do określonej długości (bo jest ładniej (IMG:style_emoticons/default/wink.gif) . Pytanie jednak czy to jest wogóle fizycznie możliwe...?

Próbowałem podkładać jakieś div-y z wypełnieniem i padding-ami ale bez efektów. Border-width z różnym jednostkami też nie działa. Obawiam się, że bez js się nie obejdzie...

Pozdrawiam, Ł.

[kapslokk]

Jeśli chcesz tylko do określonej szerokości to możesz użyć :after przykład: https://jsfiddle.net/xw2dd6tu/

[lukash82]

Hej,

Dzięki wielkie za pomoc. Wdrożyłem to do BS i nawet działa... (IMG:style_emoticons/default/wink.gif)

Pozdrawiam, Ł