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及以上版本（当然还有所有的新浏览器）

理论上，你可以使用

，然后设置它的长度并强制它以内联方式显示。如果您的编码支持，也可以使用一些特殊的unicode字符

这是一个开始：

.sub-menu-item
{
    border-bottom:1px solid black;
    height:0.6em;
    width:200px;
    text-align:center;
    margin-bottom:1em;

}
.sub-menu-item > a
{
    text-decoration:none;
    background:white;
}

​ （已更新以处理多个项目）

---

经过测试，可在Firefox、IE和Chrome中使用。现在请记住，这在小提琴中是孤立工作的。可能需要一些调整，以使其在其他html元素和样式中工作，等等。无论如何，这是概念验证。它“可以”完成。

无需更改代码：

ul li{
position: relative;
border-bottom: 1px solid #000;
}

ul li a{

position: relative;
background: #fff;
left: 0;
bottom: -10px;
margin-left: 10px;
color: orange;
text-decoration: none;
}​

---

注入一个

&mdash：before

和

：after

选择器在内容之前和之后编码。您需要使用转义的unicode，如下所示：

看。对于较短的行，您可以使用ndash。

试试这个。：）它使用了一个图像，这是一个加号，因为它允许你按照自己的意愿设计破折号，并且不会处理任何奇怪的边距或任何可能会打乱其他布局的东西

li.sub-menu-item
{
    background-image: url('http://i.imgur.com/JIa6C.png'); /* Just a transparent PNG with a line in the middle */
}

li.sub-menu-item a
{
    background-color: #FFF;
    padding: 0 10px;
    margin-left: 200px /* So you can see the left side of the line too */
}

---

您可以创建一个具有边框顶部和边框底部的div，线条高度为0，内部有一个跨度，该跨度具有定义的背景颜色：

<div class="test">
   <span>BLA BLA BLA </span>
</div>

---

---

您打算支持哪些浏览器？对于IE:ie8+和所有主流浏览器SIM不确定，因为我还没有尝试过，但您可能会在周围的字符上使用删除线。但是，您需要修改html，我知道这是您不喜欢做的事情。您希望单词左侧有多少破折号，右侧有多少破折号？如果你需要每边精确3个，那么考虑这个：我不想要破折号，我想要在文本显示中扭曲的线条在内联中？像显示：内联块？为什么？当您添加多个li项时，它会断开。@Menslici感谢您注意到这一点。通过添加边距来修复。what does.”子菜单项>a“do？”？我对CSS还是有点陌生…我投了反对票，因为这不是一个应该使用的解决方案。我们不需要概念证明，因为我们都知道这是可以做到的：）。@Tom91136

.sub-menu item>a

只引用了

标记，它是类

的直接子项（直接嵌套在类
下）。sub-menu item
。它基本上只是确保只有直接在列表项中找到的超链接才会受到样式的影响。希望这有帮助。一般来说，
仅表示直接子对象。在本例中，如果没有它，
。子菜单项a
将引用
下某处的任何
a
标记。子菜单项
。
-10px
是幻数吗-1.你为什么选择-10px？如果字体更大怎么办？好吧，我想@Tom91136不会只是复制粘贴它而不符合它自己的需要。此外，他只说他想知道是否有可能做这样的事情。最重要的是，正如你所看到的，文本有一个通用的颜色和字体，所以很明显它需要修复，但由于他没有提供一个链接让我们给它一个合适的样式，我想他会在他上线时做。懒惰的人（有时包括我，但幸运的是总有人警告我）的常见论点。你知道吗，你说得对。但我看不到你对这个问题的答案。”懒惰人的共同论点——幸运的是，确实有人在警告你们！这不是一个真正的答案，因为OP说他知道如何用图像来解决这个问题。我更喜欢你的答案。更简单，不需要文本的背景色+1.
<div class="test">
   <span>BLA BLA BLA </span>
</div>

.test {
border-bottom: 1px solid #D7D7D7;
border-top: 1px solid #A1A1A1;
line-height: 0;
text-align: center; }

.test span { 
background-color: #BABABA;
padding: 0 10px; }