css中的行之间的文本

Question

在CSS中,我该怎么做:

---Item---

用短划线连接就像一条线？

我想到了:

border-bottom: 3px solid #000;

但后来我不能向上移动线加上线将在文本后面,而不是围绕文本

我的HTML

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

(如果可能的话,我想避免触及HTML)

以上所有可能通过CSS或我应该只使用一个图像？

我的目标是ie8及以上(当然还有所有新的浏览器)

Answer 1

—使用CSS :before和:after选择器在内容之前和之后注入.你需要使用转义的unicode,如下所述:

li.sub-menu-item:before,  li.sub-menu-item:after {
    content: "\2014"
}?

见JSFiddle.对于较短的行,您可以使用ndash.