CSS,在文本旁边创建一行[重复]

nr7wwzry  于 2023-05-23  发布在  其他
关注(0)|答案(1)|浏览(58)
    • 此问题已在此处有答案**:

Line before and after title over image [duplicate](2个答案)
7年前关闭。
我已经读了多个线程没有成功。
我正在寻找帮助创建一行旁边的文本在CSS。我不允许更改HTML代码,因此向HTML代码添加span元素对我来说不是一个解决方案。
这就是它的样子。

<legend>Text</legend>

我想创建一条像这样的线http://imgur.com/BVQ2txt
有什么解决方案可以不改变html代码吗?

wqsoz72f

wqsoz72f1#

你可以这样做:

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

相关问题