in CSS, how can i do something like:

---Item---

with the dash connected like a line?

i thought of :

border-bottom: 3px solid #000;

but then i can't move the line upward plus the line would be behind the text, not surrounding the text

my HTML

<ul>
    <li class="sub-menu-item" ><a href="#">FACULTY&STAFF</a></li>
</ul>

(if possible, i would like to avoid touching the HTML)

is all the above possible via css or should i just use an image after all?