CSS трик разделители с двойна граница вертикално меню

Когато се изисква създаване на меню с разделител по време на оформлението, използвам прекрасна техника, която някога е била предложена от Юрий "akella" Artyukh.

Наскоро се сблъсках с много подобна, но по-трудна задача - трябваше да напиша вертикално меню с двойно разделител, състоящ се от два различни цвята (син и бял):

Възможни начини за решаване на проблема:

• използвайте изображение;
• използвайте само CSS.

Решението трябва да предвижда, че:

• височината на елемента от списъка може да се промени, т.е. текстът може да бъде на няколко реда;
• част от текста може да е извън маркера на връзката.

Проблеми с изображението

Ще обясня защо решението под формата на използване на изображение като граница не е подходящо в този случай.

Структурата на HTML кода на нашето меню е възможно най-проста:

На теория, използвайки техниката на Юра Артюх, би било възможно сепараторът да бъде изображение и да се постави на заден план към елемента. Но факт е, че всеки елемент в списъка все още използва изображение на маркер и ако това изображение е зададено като фон на маркера, възникват следните проблеми:

---