CSS，在文本旁边创建一行

Question

我读过多个帖子但没有成功。

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

这就是它的样子。

<legend>Text</legend>

我希望创建一个像http://imgur.com/BVQ2txt

这样的行

没有更改html代码的任何解决方案？

Answer 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; }