CSS, create a line next to text

Question

I've read multiple threads without success.

I'm looking for help creating a line next to text in CSS. I'm not allowed to change the HTML code so adding a span element to the html code is not a solution for me.

This is what it looks like.

<legend>Text</legend>

and i want to create a line like this https://i.stack.imgur.com/b1zfx.jpg

Any solution to it without changing the html-code?

legend { color: #0071BC; font-weight: bold; border-bottom: 2px solid #000; line-height: 0.1em; margin: 10px 0px 20px; } This is what i've come up with so far but it just creates a line though it and im not able to get it behind.. — Oscar, Oct 22 '15 at 13:41
Very easy to do with pseudo classes - :before, :after. Since I'm on my phone, I will let someone else demo it. — Sean Stopnik, Oct 22 '15 at 13:44

score 0 · Accepted Answer · answered Oct 22 '15 at 13:47

You can do something like this:

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

CSS, create a line next to text

1 Answers1