Как такое сверстать?

[rus]

Туплю потихоньку... не могу представить как такое можно заверстать:

Это список (<li>) пунктов меню.

Думаю что нужен один элемент (типа <span> или <div>) внутри <li>, у него сделать прерывающийся бордер, который повыше, а продолжение бордера уже у <li>, но выходит тоже с прерыванием..., но как это сделать? after, before и border?

Мозги уже не варят )

[swandev]

http://jsbin.com/IPirEre/2/edit

[rus]

спасибо.

стыдно признать, но с этими афтер и бефор так до сих пор не разобрался толком.

[CoDy]

Можно еще только одним :before сделать: http://jsfiddle.net/Tx56R/1/

[swandev]

Можно еще только одним :before сделать: http://jsfiddle.net/Tx56R/1/

 

Если бекграунд у li непрозрачный, то можно и так)

Edited November 28, 2013 by ALEEX SWN

[rus]

да, кода меньше - уже лучше, спасибо.