html - Drawing lines in <li> tag -

i have li element looks this:

|    link    | 

i want become solid line:

|----link----| 

here link code: http://jsfiddle.net/sh9hy/

i have tried putting hr tag inside li element , making hr inline failed. problem im having need line wrap around text. im clueless on one.

here's alternative.

<hr/><span>link</span>   li span {     background-color: #fff;     color: #000; }  hr {       border: none;     color: #000;     background-color: #000;     height: 1px;     margin-top: 9px;     position: absolute;     display: block;     width: 100%;     z-index: -1; }