CSS，在文本旁边创建一行[重复]答案

【问题标题】：CSS, create a line next to text [duplicate]CSS，在文本旁边创建一行[重复]
【发布时间】：2016-01-21 19:34:07
【问题描述】：

我已经阅读了多个线程但没有成功。

我正在寻求帮助，在 CSS 中的文本旁边创建一行。我不允许更改 HTML 代码，因此在 html 代码中添加 span 元素对我来说不是解决方案。

这就是它的样子。

<legend>Text</legend>

我想创建这样一行http://imgur.com/BVQ2txt

在不改变html代码的情况下有什么解决方案吗？

【问题讨论】：

传奇{颜色：#0071BC;字体粗细：粗体；边框底部：2px 实心#000；行高：0.1em；边距：10px 0px 20px；到目前为止，这是我想出的，但它只是创建了一条线，但我无法让它落后..
用伪类很容易做到 - :before, :after。既然我在手机上，那我就让别人演示一下吧。

标签： html css text line next

【解决方案1】：

你可以这样做：

legend { height: 18px; position: relative; background: #fff; display: inline-bock; margin-left: 5px; } 
legend:before { content: ""; display: block; font-size: 0; line-height: 0; text-indent: -4000px; position: absolute; top: 8px; left: -5px; right: -100px; height: 1px; border-top: 1px solid red; z-index: -1; }

【讨论】：