Как легенда о полевых линиях Line-On-Sides?

Question

У меня есть поле с легендой внутри.

<fieldset> 
    <legend>TEXT</legend> 
</fieldset> 

Я пытаюсь применить стиль, и мне нужно следующее:

sample1:

------------------- -Text ------------------------

Sample2:

TEXT ------------- -----------

Ps: линия не разбита

Есть ли простой способ сделать это только с помощью css? Я нашел несколько образцов с таблицами ...

Answer 1

Это то, что вы ищете ?:

#sample1 { 
 
    text-align: center; 
 
    border: none; 
 
    border-top: 1px solid black; 
 
} 
 

 
#sample2 { 
 
    text-align: left; 
 
    border: none; 
 
    border-top: 1px solid black; 
 
}

<fieldset id="sample1"> 
 
    <legend>Sample 1</legend> 
 
</fieldset> 
 

 
<fieldset id="sample2"> 
 
    <legend>Sample 2</legend> 
 
</fieldset>