Two legends in a fieldset
You can do that by adding an extra element and positioning it absolutly in the <fieldset>
:
fieldset {
position: relative;
}
.legend2 {
position: absolute;
top: -0.2em;
right: 20px;
background: #fff;
line-height:1.2em;
}
<fieldset>
<legend>
Some Text
</legend>
<div class="legend2">Some other Text</div>
</fieldset>
You can use :after
pseudo selector to achieve this. SEE THE DEMO.
This way, you don't have to use any additional html tags.
fieldset {
position: relative;
}
fieldset:after {
content: "Some Text";
position: absolute;
margin-top: -25px;
right: 10px;
background: #fff;
padding: 0 5px;
}