Разделитель в меню

[cruel09]

Здравствуйте, подскажите пожалуйста как сделать такой разделитель через css без картинки.

это можно сделать через правый бордер, но как его обрезать? он же не по всей высоте 

[cruel09]

.t-menu li::after {    position: absolute;    content: '';    height: 15px;    margin-top: 0px;    margin-left:11px;    border-left: 1px solid #dc466c;    border-right: 1px solid #dc466c;    z-index: 0;}

Сделал вот так, но как не добавлять разделитель к двум последним разделам? 

.t-menu li:nth-child(-n+6)::after {    position: absolute;    content: '';    height: 15px;    margin-top: 0px;    margin-left:11px;    border-left: 1px solid #dc466c;    border-right: 1px solid #dc466c;    z-index: 0;}

Вот так у меня В общем сейчас, это нормально или есть более хороший вариант? 

[DivMan]

Я верстал такой макет 

[Switch74]

а не пробовали просто | использовать? можно беформа и афтерами, для последних двух элементов не нужен бордер? На картинке можете показать? а то в данном примере видно, что у последнего все есть

[cruel09]

Спасибо за советы, подскажите еше пожалуйста как исправить "дергание" меню:  http://jsfiddle.net/g4pa8v53/2/

Edited September 30, 2014 by cruel09

[Laroxx12]

Спасибо за советы, подскажите еше пожалуйста как исправить "дергание" меню:  http://jsfiddle.net/g4pa8v53/2/

http://jsfiddle.net/g4pa8v53/4/ так?

[IIIIIIIIII]

Спасибо за советы, подскажите еше пожалуйста как исправить "дергание" меню:  http://jsfiddle.net/g4pa8v53/2/

 Зачем бордер совсем убирать? Его надо просто сделать прозрачным при наведении.

 

 

Спасибо за советы, подскажите еше пожалуйста как исправить "дергание" меню:  http://jsfiddle.net/g4pa8v53/2/

http://jsfiddle.net/g4pa8v53/4/ так?

 

А вы вообще абру-кадабру сделали

Edited September 30, 2014 by IIIIIIIIII

[Laroxx12]

 

Спасибо за советы, подскажите еше пожалуйста как исправить "дергание" меню:  http://jsfiddle.net/g4pa8v53/2/

 Зачем бордер совсем убирать? Его надо просто сделать прозрачным при наведении.

 

 

Спасибо за советы, подскажите еше пожалуйста как исправить "дергание" меню:  http://jsfiddle.net/g4pa8v53/2/

http://jsfiddle.net/g4pa8v53/4/ так?

 

А вы вообще абру-кадабру сделали

 

Почему?

[Switch74]

красота и здоровье при наведении себя интересно ведет

[IIIIIIIIII]

 

 

Спасибо за советы, подскажите еше пожалуйста как исправить "дергание" меню:  http://jsfiddle.net/g4pa8v53/2/

 Зачем бордер совсем убирать? Его надо просто сделать прозрачным при наведении.

 

 

Спасибо за советы, подскажите еше пожалуйста как исправить "дергание" меню:  http://jsfiddle.net/g4pa8v53/2/

http://jsfiddle.net/g4pa8v53/4/ так?

 

А вы вообще абру-кадабру сделали

 

Почему?

 

.l-menu li a {...border-bottom: none;...}.l-menu li:hover a {...border-bottom:1px rgba(0, 0, 0, 0);...  }

Объясните логически смысл вашего кода.

[Laroxx12]

 

 

 

Спасибо за советы, подскажите еше пожалуйста как исправить "дергание" меню:  http://jsfiddle.net/g4pa8v53/2/

 Зачем бордер совсем убирать? Его надо просто сделать прозрачным при наведении.

 

 

Спасибо за советы, подскажите еше пожалуйста как исправить "дергание" меню:  http://jsfiddle.net/g4pa8v53/2/

http://jsfiddle.net/g4pa8v53/4/ так?

 

А вы вообще абру-кадабру сделали

 

Почему?

 

.l-menu li a {...border-bottom: none;...}.l-menu li:hover a {...border-bottom:1px rgba(0, 0, 0, 0);...  }

Объясните логически смысл вашего кода.

 

border-bottom:1px rgba(0, 0, 0, 0); это то что мне первым на ум пришло, забыл удалить

 

.l-menu li:hover {

....

padding:4px 0 4px 10px;

....

}

я ему это убрал

[cruel09]

 

 

 

 

Спасибо за советы, подскажите еше пожалуйста как исправить "дергание" меню:  http://jsfiddle.net/g4pa8v53/2/

 Зачем бордер совсем убирать? Его надо просто сделать прозрачным при наведении.

 

 

Спасибо за советы, подскажите еше пожалуйста как исправить "дергание" меню:  http://jsfiddle.net/g4pa8v53/2/

http://jsfiddle.net/g4pa8v53/4/ так?

 

А вы вообще абру-кадабру сделали

 

Почему?

 

.l-menu li a {...border-bottom: none;...}.l-menu li:hover a {...border-bottom:1px rgba(0, 0, 0, 0);...  }

Объясните логически смысл вашего кода.

 

border-bottom:1px rgba(0, 0, 0, 0); это то что мне первым на ум пришло, забыл удалить

 

.l-menu li:hover {

....

padding:4px 0 4px 10px;

....

}

я ему это убрал

 

если убрать паддинг то розовое выделение выползает за меню

 

хотя на http://jsfiddle.net оно и с ним вылезает, но у меня на сайте он не выползает, но дергается

 

а все, спасибо, решил

Edited September 30, 2014 by cruel09