html - css中行与行之间的文本

<分区>

在 CSS 中，我该怎么做:

---Item---

破折号连成一条线？

我想到了:

border-bottom: 3px solid #000;

但是我不能向上移动线，而且线会在文本后面，而不是围绕文本

我的 HTML

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

(如果可能的话，我想避免接触 HTML)

是否可以通过 css 实现以上所有功能，还是我应该只使用图像？

我的目标是 ie8 及更高版本(当然还有所有新的浏览器)

最佳答案

使用 CSS :before 和 :after 选择器在内容前后插入 —。您需要使用转义的 unicode，如 discussed here :

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

参见 JSFiddle .对于较短的行，您可以使用 ndash。

关于html - css中行与行之间的文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11347307/